美文网首页
2019-09-19

2019-09-19

作者: Amuer蘃 | 来源:发表于2019-10-11 11:32 被阅读0次

    鼠标事件

    box.onclick = function(){}//鼠标单击
    box.ondblclick = function(){}//鼠标双击
    box.nomousedown =function(){}//鼠标按下
    box.nomouseup =function(){}//鼠标抬起
    box.nomouseover =function(){}//鼠标移入
    box.nomouseout =function(){}//鼠标移出
    box.nomouseenter =function(){}//鼠标移入‘不触发冒泡’
    box.nomouseleave =function(){}//鼠标移出‘不触发冒泡’
    box.nomousemove =function(){}//鼠标在元素内移动时触发
    

    键盘事件

    document.body.onkeydown=function(e){var e = e.event||window.event}//键盘按下,按住重复触发
    document.body.onkeyup=function(e){var e = e.event||window.event}//键盘抬起触发
    document.body.onkeypress=function(e){var e = e.event||window.event}//键盘按住重复触发
    

    倒计时抽奖

      <div class="box">
            <div id="sb"></div>
            <button id="start">点击开始</button>
            <p>剩余<strong id="num"></strong> 次</p>
        </div>
        <script>
            function getLuck() {//封装抽奖函数
                function getId(idname) {//封装获取id的函数
                    return document.getElementById(idname)
                }
                var count = 3;//剩余次数
                var sb = getId('sb')
                var st = getId('start')
                var num = getId('num')
                suiji = 0;//从下标0开始
                num.innerHTML = count;//将次数写入页面
                
                var arr = ['张三', '吴老二', '赵八', '孙六', '王五', '李四'];
                st.onclick = function () {//点击开始
                    events(arr)
                }
                sb.innerHTML = arr[suiji];//将随机获取的中奖者写入页面
                function events(arr) {//封装一个倒计时抽奖的函数
                    if (count > 0) {//当次数大于零时
                        timer = setInterval(function () {
                            st.disabled = true;//点击开始按钮被禁用
                            suiji = Math.floor(Math.random() * arr.length);//从抽奖者中随机获取一个下标
                            sb.innerHTML = arr[suiji];//将中奖者写入页面
                        }, 10)
                        setTimeout(function () {//每三秒启动一次定时器
                                clearInterval(timer);//清空定时器
                                timer = null;
                                arr.splice(suiji, 1)//截取中奖者
                                st.disabled = false;//开始按钮禁用接触
                                console.log(arr)
                        }, 3000)
                    } else {//当次数小于等于0时,抽奖不生效,开始按钮被禁用
                        st.disabled = true;
                        return false;
                    }
                    count--;//抽奖次数递减
                    num.innerHTML = count;
                }
                
               
                
            }
            getLuck()
        </script>
    

    相关文章

      网友评论

          本文标题:2019-09-19

          本文链接:https://www.haomeiwen.com/subject/xqtxuctx.html