html 如何在里面加一个计时器啊能够实现数字从1-200 循环跳动且指针也跟随变化_随笔

写了一个简单地定时器使数字循环跳动的，每秒加一。希望能帮到你

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

window.onload=function ()

{

var oDiv=document.getElementById('div1')

var value=1

setInterval(function(){

oDiv.innerHTML=value

value++

if(value>200){

value=1

}

},1000)

}

</script>

</head>

<body>

</body>

</html>

添加计时器的方法如下：

1、首先新建一个html页面，并设置一个按钮；

2、然后给这个按钮绑定一个函数；

3、接着设置一个变量用来保存定时器；

4、最后在Function里面写实现代码即可。

本文 *** 作环境：windows7系统、html5&&javascript1.8.5版、DellG3电脑等。

以下是个JS做的秒表空格开始再空格结束

<html>

<head>

<title>秒表 Stopwatch for Rubik's Cube China</title>

</head>

<style>

td,input,div,th{font:9pt verdana}

p {line-height:60%}

</style>

var Max=25

var bestAve

var then

var nowDec

var nowBest

var nowWorst

var runing=0

var timeint

var i=0

var totalsec

var sec

var min

var subsec

var secdis

var mindis

var subsecdis

var datas=new Array()

var nowSecondes

function getAv(st,ed)

{

for(i=sti<=edi++)

{

datas.join(" ")

}

function stop(evt)

{

if (runing==1 &&evt.keyCode==32)

clearTimeout(timeint)

}

function toSeconds(dec)

{ var Ms,sec

var tmpDec=dec.split(":")

if(tmpDec[0]*10/10>0)

{

Ms=tmpDec[0]*60

return(Ms+tmpDec[1]*10/10)

}else{

return(tmpDec[1]*10/10)

}

function begin(evt)

{

if (evt.keyCode==32)

{

if (runing==0){

then=new Date()

runing=1

show()

}

else if (runing==1)

{

runing=2

}

else

{

ShowDatas(toSeconds(nowSeconds))

document.getElementById("watch").innerHTML="00:00.00"

runing=0

}

var a=0

function ShowDatas(dec)

{

if(dec==0){return false}

var newDec=get2(dec)

datas.push(newDec) //添加记录

SortDatas() //排序得到最大最小值

ShowDetails()

spanBest.innerHTML="<b style=color:red>"+sec2minsec(nowBest)+"</b>"

spanWorst.innerHTML="<b>"+sec2minsec(nowWorst)+"</b>"

var tmp1=0

for(i=0i<datas.lengthi++)

{

tmp1+=datas[i]

}

spanAv.innerHTML="<b>"+sec2minsec(get2(tmp1/datas.length))+"</b>"

}

var bestAve=new Array()

function sec2minsec(n)

{ if (n>60)

{

var tmpmins=Math.floor(n/60)

var tmpseconds=get2(n-tmpmins*60)

var tmpstring

if (tmpseconds<10)

{ tmpstring=tmpmins+":0"+tmpseconds

}

else tmpstring=tmpmins+":"+tmpseconds

return tmpstring

}

else return n

}

function ShowDetails()

{

if(datas.length>12){a=datas.length -12}

var tmpTd="<table cellspacing=1 bgcolor=olive><tr align=center bgcolor=EEEEEE><th width=50>1<th width=50>2<th width=50>3<th width=50>4<th width=50>"

tmpTd+="5<td width=50>6<th width=50>7<th width=50>8<th width=50>9<th width=50>10<th width=50>11<th width=50>12</tr><tr bgcolor=white>"

for(i=ai<(12+a)i++)

{

bestAve[i-a]=datas[i]//将当前12局成绩存入数组

tmpTd+="<td align=center>"

if(datas[i]==undefined){tmpTd+="-"}

else

{

if(datas[i]==nowBest || datas[i]==nowWorst)

{

tmpTd+=sec2minsec(datas[i])+"*"

}else

{

tmpTd+=sec2minsec(datas[i])

}

tmpTd+="</td>"

}

tmpTd+="</tr></table>"

//alert(datas.join(","))

div1.innerHTML=""

div1.innerHTML=tmpTd

rndCube()

document.focus()

}

function show()

{ var now=new Date()

diff=now.getTime()-then.getTime()

totalsec=Math.floor(diff/1000)

sec=totalsec%60

if(sec<10)

{

secdis="0"+sec

}

else

{

secdis=sec

}

min=(totalsec-sec)/60

if (min<10)

{

mindis="0"+min

}

else

{

mindis=min

}

subsec=Math.floor((diff%1000)/10)

if (subsec<10)

{

subsecdis="0"+subsec

}

else

{

subsecdis=subsec

}

nowSeconds=mindis+":"+secdis+"."+subsecdis

document.getElementById("watch").innerHTML=nowSeconds

timeint=setTimeout("show()",50)

}

function get2(dec) //取两位小数点

{

return Math.round(dec*100)/100

}

function SortDatas()//最大最小值

{

var tmpArr=new Array()

for(i=0i<datas.lengthi++)

{

tmpArr[i]=datas[i]

}

tmpArr.sort(function(a,b){ return a-b})

nowBest=tmpArr[0]

nowWorst=tmpArr[tmpArr.length-1]

ShowBestAv()

}

function mycls()

{

clearTimeout(timeint)

nowSeconds="00:00:00"

runing=0

datas=new Array()

ShowDatas(0)

ShowDetails()

document.getElementById("watch").innerHTML="00:00.00"

btn1.focus()

}

function ShowBestAv()

{

var av=0

bestAve.sort()

if(bestAve[11]==undefined){return false}

for(i=1i<bestAve.length-1i++)

{

av+=bestAve[i]

}

spanBestAv.innerHTML=get2(av/10)

//alert(bestAve)

}

</script>

function cancel()

{ clearTimeout(timeint)

nowSeconds="00:00:00"

runing=0

btn1.focus()

rndCube()

document.getElementById("watch").innerHTML="00:00.00"

}

function rndCube()

{

var move=""

var rndMove=new Array("R","L","F","B","U","D")

var add=0

var tmpRnd

var arr=new Array()

while(true)

{

if(add>=Max){break}

//tmpRnd=Math.round(Math.random()*5)

if(tmpRnd==arr[arr.length -1])

{ tmpRnd=Math.floor(Math.random()*6)

}

else

{ arr.push(tmpRnd)

add++

}

for(i=0i<arr.lengthi++)

{

var tmp=Math.floor(Math.random()*5)

if(tmp==4)

{ move+=rndMove[arr[i]]+"2"}

else if(tmp==2 || tmp==3)

{ move+=rndMove[arr[i]]+"'"}

else

{ move+=rndMove[arr[i]]}

move+=" "

}

rndDiv.innerHTML=move

}

</script>

<p>

<font size="2">用<font color="#000080"><b>空格</b></font>键<b>开始</b>(松开时触发)、<b>停止</b>(按下时触发)、<b>复位</b>(同时记录成绩)，enjoy：）</font></p>

<p><b><font size="2" color="#FF0000">注意：</font></b><font size="2">请先最大化窗口或拉伸窗口使右边的滚动条不出现，否则空格键会让窗口滚动。</font></p>

<p><font size="2">下面的记录系统是魔方吧的MAN大侠编写。</font>

</p>

<td width=50>1

<td width=50>2

<td width=50>3

<td width=50>4

<td width=50>5

<td width=50>6

<td width=50>7

<td width=50>8

<td width=50>9

<td width=50>10

<td width=50>11

<td width=50>12

</tr>

<td width=50>-

</tr>

</table>

</div>

</center>

</table>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7430160.html

html 如何在里面加一个计时器啊能够实现数字从1-200 循环跳动且指针也跟随变化

发表评论

评论列表（0条）

html 如何在里面加一个计时器啊 能够实现数字从1-200 循环跳动 且指针也跟随变化

发表评论

评论列表（0条）

html 如何在里面加一个计时器啊能够实现数字从1-200 循环跳动且指针也跟随变化