【休闲】随机点名-html

最新推荐文章于 2024-05-10 15:45:24 发布

viceen

最新推荐文章于 2024-05-10 15:45:24 发布

阅读量3.4k

点赞数 4

分类专栏：休闲文章标签： html

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109384761

版权

休闲专栏收录该内容

6 篇文章 1 订阅

订阅专栏

随机点名
在这里插入图片描述
代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #start{width: 100px;height: 50px;text-align:center;line-height:50px;
        position: relative;top: 480px;left: 300px;background: #99cc33;margin: 0;padding: 0;}
        #end{width: 100px;height: 50px;text-align:center;line-height:50px;
        position: relative;top: 480px;left: 570px;background: #FF0000;margin: 0;padding: 0;}
        .p{width: 100px;height: 100px;background: #20B2AA;float: left;margin: 10px;text-align: center;line-height: 100px;}
        #box{overflow: hidden;}
        .select_box{width: 100px;height: 100px;background: #ADFF2F;float: left;margin: 10px;text-align: center;line-height: 100px;}
    </style>

    <!--设置样式-->
    <script type="text/javascript">
        //定义一个全局变量,定时器会用到
        var timeId = 0;
        onload = function(){
            //DOM方法,获得标签
        var box = document.getElementById("box");
        //用循环的方法,遍历出学号
        for(var i = 1;i<31;i++){
            //创建一个p标签
            var p = document.createElement('p');
            //给p标签添加内容
            p.innerHTML = '学号'+i;
            //添加属性,然后再style里面写样式
            p.className = 'p';
//          把p标签添加到外部盒子里边
            box.appendChild(p); 
        }
        }
        //开始选择
        function start(){
            //定时器,定义一个函数
            timeId = setInterval(function(){
                //随机出一个数
                var num = Math.floor(Math.random()*30);
                //获得p标签
                var pp = document.getElementsByTagName('p')
                //循环
                for(var i =1;i<pp.length;i++){
                    //判断,如果随机的数等于学号
                if(i == num){
                    //给相等的那个学生一样式,跟其他人的不一样
                    pp[num].className = 'select_box';
                    //如果不相等,则样式不变
                }else{
                    pp[i].className = 'p'
                }
                }
            },100);         
        }
        //定时器结束,if条件句可有可无
        function end(){
//          if(timeId!=0){
                clearInterval(timeId);
//          }

        }

    </script>
    <body>
        <!--开始和结束的按钮   οnclick="start()"点击事件-->
        <input type="button"  οnclick="start()" value = 'start'  id = 'start' />
        <input type="button"  οnclick="end()" value = 'end' id = 'end'/>

        <div id = 'box'></div>
    </body>
</html>

viceen

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
【休闲】随机点名-html

随机点名代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #start{width: 100px;height: 50px;text-align:center;line-height
复制链接

扫一扫

专栏目录