사용자 정의 플러스 숫자

68162 단어
한 분 한 분 동시에 추가.
<html>

<head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset='utf-8' />
    <title> title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <link href="index.css" rel="stylesheet" />
head>

<body>
    <h1> h1>
    <div id='div1'>
        <div class="test">div>
    div>
    <div id='div2'>
        <span value=6>0span><span value=5>0span><span value=7>0span><span value=4>0span><span value=2>0span>
    div>
    <select id='selectSpeed' onchange='changeSpeed'>
        <option>change speedoption>
        <option>20option>
        <option>50option>
        <option>100option>
        <option>200option>
        <option>300option>
    select>
    <script src='/jquery.min.js'>script>
    <script>
    var isFinish = false;

    function add2(speed) {
        isFinish = false;
        var div2 = $('#div2');
        div2.find('span').each(function() {
            var self = $(this);
            var i = 0;
            var c = setInterval(function() {
                i++;
                self.html(i);
                if (i >= self.attr('value')) {
                    clearInterval(c);
                    isFinish = true;
                }
            }, speed)
        })


    }
    add2(50)
    $('#selectSpeed').change(function() {
        if (isFinish === true && $('#selectSpeed').val() != 'change speed') {
            $('#div2').find('span[value!="."]').html(0);
            add2($('#selectSpeed').val())
        }

    })
    script>
body>

html>

매번 랜덤 수를 하나 더하다
<html>

<head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title> title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <link href="index.css" rel="stylesheet" />
head>

<body>
    <h1> h1>
    <div id='div2'>
        <div class="test" v-text="number">div>
    div>
    <select id='selectSpeed'>
        <option>change speedoption>
        <option>20option>
        <option>50option>
        <option>100option>
        <option>200option>
        <option>300option>
    select>
    <script src='/js/vue.min.js'>script>
    <script src='/js/jquery.min.js'>script>
    <script>
    var vm = new Vue({
        el: '#div2',
        data: {
            number2: 500,
            number: 0,
        }
    })

    vm.$watch('number', function(val) {
        this.number = val
    })
    var isFinish = false;

    function add(speed) {
        isFinish = false;
        var c = setInterval(function() {
            if (!vm.number) {
                vm.number = 0;
            }
            var add = Math.random() * 10;
            // var add = 1;
            var temp = vm.number;
            temp += add;
            //console.log(temp)
            temp = Math.round(temp * 100) / 100;
            //console.log('ccccccc:'+temp)
            vm.number = temp;

            if (vm.number + 1 >= vm.number2) {
                vm.number = vm.number2;
                isFinish = true;
                clearInterval(c);
            }

        }, speed)
    }
    add(2)
    $('#selectSpeed').change(function() {
        if (isFinish === true && $('#selectSpeed').val() !== 'change speed') {
            vm.number = 0;
            add($('#selectSpeed').val())
        }
    })
    script>
body>

html>

한 분 한 분 나누어 더하기
<html>

<head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title> title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <link href="index.css" rel="stylesheet" />
head>

<body>
    <h1> h1>
    <div id='div1'>
        <div class="test">div>
    div>
    <div id='div2'>
        <span value=6>0span><span value=5>0span><span value=7>0span><span value=.>.span><span value=4>0span><span value=2>0span>
    div>
    <select id='selectSpeed'>
        <option>change speedoption>
        <option>20option>
        <option>50option>
        <option>100option>
        <option>200option>
        <option>300option>
    select>
    <script src='/js/jquery.min.js'>script>
    <script>
    var animate = function(obj, stepTime) {
        this.obj = obj;
        this.stepTime = stepTime;
    }
    var isFinish = false;
    animate.prototype.add = function() {
            var i = 0;
            var self = this;
            var c = setInterval(function() {
                i++;
                self.obj.html(i);
                if (i >= self.obj.attr('value')) {
                    clearInterval(c);

                }
            }, self.stepTime)
        }
        // new animate($('#div2').find('span:eq(2)')).add();

    var changeNumber = function(list, speed) {
        this.list = list;
        this.count = this.list ? this.list.length ? this.list.length : 0 : 0;
        this.currentIndex = 0;
        this.addStepTime = speed;
        this.timespan = 0;
    }
    changeNumber.prototype.begin = function() {
        isFinish = false;
        var self = this;

        setTimeout(function() {
            if (--self.count < 0) {
                isFinish = true;
                return;
            }
            var currentObj = $(self.list[self.count]);
            self.timespan = currentObj.attr('value') * self.addStepTime;
            //console.log(self.timespan)
            new animate(currentObj, self.addStepTime).add();
            self.begin();
        }, self.timespan);
    }
    new changeNumber($('#div2').find('span[value!="."]'), 30).begin();

    $('#selectSpeed').change(function() {
        if (isFinish === true && $('#selectSpeed').val() != 'change speed') {
            $('#div2').find('span[value!="."]').html(0);
            new changeNumber($('#div2').find('span[value!="."]'), $('#selectSpeed').val()).begin();
        }
    })
    script>
body>

html>

규정된 시간 내에 추가로 끝내다
<html>

<head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title> title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset='utf-8' />
    <link href="index.css" rel="stylesheet" />
head>

<body>
    <h1> h1>
    <div id='div2'>
        <div class="test" v-text="number">div>
    div>
    <select id='selectSpeed'>
        <option>change speedoption>
        <option>10000option>
        <option>5000option>
        <option>2000option>
        <option>1000option>
        <option>500option>
    select>
    <script src='/js/vue.min.js'>script>
    <script src='/js/jquery.min.js'>script>
    <script>
    var vm = new Vue({
        el: '#div2',
        data: {
            number2: 2,
            number: 0,
        }
    })

    vm.$watch('number', function(val) {
        this.number = val
    })
    var isFinish = false;

    function add(totalTime) {
        isFinish = false;
        // 
        var count = totalTime / 20;
        // 
        var add = parseFloat(vm.number2 / count);
        var c = setInterval(function() {
            if (!vm.number) {
                vm.number = 0;
            }
            //var add=Math.random()*10; 
            // var add = 1;
            var temp = vm.number;
            temp += add;
            //console.log(temp)
            temp = Math.round(temp * 100) / 100;
            //console.log('ccccccc:'+temp)
            vm.number = temp;

            if (vm.number + 1 >= vm.number2) {
                vm.number = vm.number2;
                isFinish = true;
                clearInterval(c);
            }

        }, 20)
    }
    add(1000)
    $('#selectSpeed').change(function() {
        if (isFinish === true && $('#selectSpeed').val() !== 'change speed') {
            vm.number = 0;
            add($('#selectSpeed').val())
        }
    })
    script>
body>

html>

좋은 웹페이지 즐겨찾기