当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 简单制作点名器 原生js

简单制作点名器 原生js

2020年07月15日  | 移动技术网IT编程  | 我要评论 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            height: 400px;
            background-color: #f00;
            margin: 30px auto;
            box-sizing: border-box;
            padding: 30px;

        }

        .main {
            width: 200px;
            height: 200px;
            background-color: #0f0;
            margin: 0 auto;
            text-align: center;
            font-size: 40px;
            line-height: 200px;
        }

        .btn {
            width: 100px;
            height: 100px;
            background-color: #00f;
            margin-left: 180px;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<script src='../js/tool.js'></script>

<body>
    <div class='wrap'>
        <div class='main'>随机点名器</div>
        <div class='btn' οnclick='select(this)'>开始</div>
    </div>
    <script>
        var wrap = document.querySelector('.wrap');
        var main = document.querySelector('.main');
        var btn = document.querySelector('.btn');
        var nameArr = ['张三', '李四', '王五', '赵六'];
        var mytime = null;//设置一个空值变量
        //通过点击按钮的切换来控制定时器的结束和开始
        //点击开始按钮，定时器启动，开始按钮切换成停止按钮
        function select(btn) {
            if (mytime == null) {
                btn.innerHTML = '停止';
                //把
                mytime = setInterval("show()", 300);
            } else {
                //点击停止按钮，使定时器结束，结束按钮切换成开始按钮
                //点击停止按钮时，清除定时器，
                btn.innerHTML = '开始';
                clearInterval(mytime);
                mytime = null;
            }
            //
        }
        //随机出名字
        function show() {
            var getIndex = getRandNum(0, nameArr.length - 1)//调用tool.js里面的随机数
            main.innerHTML = nameArr[getIndex];

        }
    </script>
</body>

</html>

tool.js里面的代码

//封装随机数
function getRandNum(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
//封装随机颜色
function getRandColor() {
    var color1 = getRandNum(0, 255);
    var color2 = getRandNum(0, 255);
    var color3 = getRandNum(0, 255);
    return "rgb(" + color1 + "," + color2 + "," + color3 + ")"
}

//阻止冒泡事件
function pBubble() {
    if (event && event.stopPropagation) {
        event.stopPropagation()//非ie

    } else {
        event.cancelBubble = true//ie系列 ie678
    }
}

/* 添加事件 
obj - 某个对象
EType - 某个事件
fun - 触发的函数*/
function addEvent(obj, EType, fun) {
    if (obj.addEventListener) {
        obj.addEventListener(EType, fun)

    } else if (obj.attachEvent) {
        obj.attachEvent('on' + EType, fun)
    } else {
        //onclick
        obj['on' + EType] = fun
    }

}

/* 移除事件 */
function removeEvent(obj, EType, fun) {
    if (obj.removeEventListener) {
        obj.removeEventListener(EType, fun)

    } else if (obj.detachEvent) {
        obj.detachEvent('on' + EType, fun)
    } else {
        //onclick
        obj['on' + EType] = false;
        // obj['on'+EType]=null;
    }
}
tool.js
/* 禁止默认事件 */
function pDefaultfun(event){
    if(event.preventDefault){
        event.preventDefault()
    }else{
        event.returnValue=false;
    }
}

本文地址：https://blog.csdn.net/blue__k/article/details/107346632

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网