2019-09-19

2019-10-11  本文已影响0人  Amuer蘃

鼠标事件

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>
上一篇 下一篇

猜你喜欢

热点阅读