<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>city</title>
<style type="text/css">
#bodybj{background: url(img/city.jpg)no-repeat center top;}
#box{
margin: auto;
width: 660px;
height: 94px;
margin-top: 180px;
text-align: center;
color: #138eee;
font-size: 66px;
}
#bt{
margin: auto;
width: 200px;
margin-top: 25px;
text-align: center;
color: #000000;
font-size: 50px;
cursor: pointer;
}
</style>
</head>
<body id="bodybj">
<div id="box">选择城市</div>
<div id="bt" οnclick="doit()">开始</div>
<script type="text/javascript">
var citylist = ["北京","上海","长春","广州","哈尔滨","武汉","沈阳","大连","呼和浩特","成都","淮安"];
var mytime = null;
function show(){
var box = window.document.getElementById("box");//获取id属性为box的div元素
var num = Math.floor(Math.random()*citylist.length);//随机生成数组的下标
box.innerHTML = citylist[num]; //显示随机下标对应的数组元素(城市名称)
mytime = setTimeout("show()",20);//设置定时器每20毫秒调用函数show()执行,刷新显示
}
function doit(){
var bt = window.document.getElementById("bt");
if(mytime == null){
bt.innerHTML = "停止";
show();
}
else{
bt.innerHTML = "开始";
clearTimeout(mytime);//参数必须是由setTimeout()返回的ID值。
mytime = null;
}
}
</script>
</body>
</html>
点击开始出现随机城市
最新推荐文章于 2024-07-24 16:20:17 发布