zoukankan html css js c++ java

自定义加数字

每一位同时加

<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>0</span><span value=5>0</span><span value=7>0</span><span value=4>0</span><span value=2>0</span>
    </div>
    <select id='selectSpeed' onchange='changeSpeed'>
        <option>change speed</option>
        <option>20</option>
        <option>50</option>
        <option>100</option>
        <option>200</option>
        <option>300</option>
    </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 speed</option>
        <option>20</option>
        <option>50</option>
        <option>100</option>
        <option>200</option>
        <option>300</option>
    </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>0</span><span value=5>0</span><span value=7>0</span><span value=.>.</span><span value=4>0</span><span value=2>0</span>
    </div>
    <select id='selectSpeed'>
        <option>change speed</option>
        <option>20</option>
        <option>50</option>
        <option>100</option>
        <option>200</option>
        <option>300</option>
    </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 speed</option>
        <option>10000</option>
        <option>5000</option>
        <option>2000</option>
        <option>1000</option>
        <option>500</option>
    </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>

查看全文

相关阅读:
python 产生token及token验证
 Django中间件
 docker学习笔记16：Dockerfile 指令 ADD 和 COPY介绍
 Docker 容器镜像删除
 linux查找nginx所在目录
 nginx启动访问
 nginx安装【linux下安装】
QPS计算
 Jmeter压测问题_Non HTTP response code: org.apache.http.conn.ConnectTimeoutException
Jmeter压测问题_Non HTTP response code: java.net.ConnectException

原文地址：https://www.cnblogs.com/benchan2015/p/5068993.html