每一位同时加
<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>