사용자 정의 플러스 숫자
<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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.