这个html计时器为什么打开后什么都不显示?

这个html计时器为什么打开后什么都不显示?,第1张

1、你引入xxx.js文件的代码没错;

2、注意你的html文件名称是 index(2).html,确保你在浏览器里访问的是这个文件;

3、并不是引入了js文件就会执行,有些js文件的内容不是执行代码,而是函数定义,这种情况要调用后才会执行的。

举例说明:

1、如果xxx.js文件的内容是

alert('ok')

那么在访问html文件时,会自动执行代码,d出提示信息ok。

2、如果xxx.js文件的内容是

function aaa(){

alert('ok')

}

那么在访问html文件时,只是引入了函数aaa的定义,不会执行代码,所以不会d出提示信息ok。

要在js文件或html文件中加入调用语句 aaa()才会执行,d出提示信息ok。

<div align="center"><span class="STYLE7" id="clock">180</span><strong><span class="STYLE8">后二维码将过期失效</span>

<script type="text/javascript">var oclock=document.getElementById("clock")

var start1 = oclock.innerHTML

var finish = "0"

var timer = null

run()

function run() {//定义时间函数,让秒表每100ms变化一次

timer =setInterval("onTimer()", 1000)//100ms的定时器

}

function onTimer()

{

if (start1 == finish)//如果倒计时结束清除时间函数

{

clearInterval(timer)

start1="181"//(清除时间函数后还是会执行一次 所以多给一个10ms再动态赋值)

}

start1 -= 1//每次执行ms减10

oclock.innerHTML = start1//重新给oclock赋值

}

</script>

</div>记得采纳哦!

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

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

</head>

<style>

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

p {line-height:60%}

</style>

<body onkeyup="begin(event)" onkeydown="stop(event)" onload=rndCube()>

<script type=text/javascript>

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>

<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>

<center>

<div id="watch" style="filter:shadraw(x=1,y=1,color=black)position:relativewidth: 359pxheight: 80px font-size:48ptfont-family:Arialfont-weight:boldcolor:navytext-align:center" >00:00.00</div>

<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>

<div id=rndDiv style="font:12pt Arialfont-weight:bold"></div>

<input type=button value="清除所有记录" onclick=mycls()><input type=button value="不记录此次成绩" type=button onclick=cancel()div1.focus()>

<input type=button value="" style="width:0pxheight:0px" onclick="document.focus" id=btn1>

<div id=div1>

<table cellspacing=1 bgcolor=olive>

<tr bgcolor=#EEEEEE align=center>

<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>

<tr bgcolor=white align=center>

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

<td width=50>-

</tr>

</table>

</div>

</center>

<table align=center>

<tr><td>最快:</td><td><span id=spanBest></span></td></tr>

<tr><td>最慢:</td><td><span id=spanWorst></span></td></tr>

<tr><td>平均:</td><td><span id=spanAv></span></td></tr>

<tr><td>最好平均:</td><td><span id=spanBestAv></span></td></tr>

</table>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存