鼠标事件
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>
网友评论