点击开始出现随机城市

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

  • 10
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值