高级 JavaScript 实例03

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_34266504

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量117

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2552902/blog/543963

版权

2019独角兽企业重金招聘Python工程师标准>>>

简单的计时

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
</body>

</html>

另一个简单的计时

<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</script>
</head>

<body>

<form>
<input type="button" value="显示计时的文本" onClick="timedText()">
<input type="text" id="txt">
</form>

<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p>
</body>

</html>

在一个无穷循环中的计时事件

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>

<body>

<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>

<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>

</body>

</html>

带有停止按钮的无穷循环中的计时事件

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>

<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>

<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时。</p>

</body>

</html>

使用计时事件制作的钟表

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

创建对象的实例

<html>
<body>

<script type="text/javascript">

personObj=new Object()
personObj.firstname="John"
personObj.lastname="Adams"
personObj.age=35
personObj.eyecolor="black"

document.write(personObj.firstname + " 的年龄是 " + personObj.age + " 岁。")

</script>

</body>
</html>

创建用于对象的模板

<html>
<body>

<script type="text/javascript">

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

myFather=new person("John","Adams",35,"black")

document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")

</script>

</body>
</html>

转载于:https://my.oschina.net/u/2552902/blog/543963