自定义加数字

每一位同时加

复制代码
<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>
复制代码

 

posted @   Ben Chan  阅读(326)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
点击右上角即可分享
微信分享提示