一、使用js完成抽奖项目效果和内容自定义
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖活动</title>
<style>
body {
font-family: "黑体";
text-align: center;
margin-top: 180px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
cursor: pointer;
border: none;
border-radius: 5px;
}
#start{
background-color: palevioletred;
color: white;
}
#end{
background-color: deepskyblue;
color: white;
}
#wp{
font-family: "黑体";
margin-top: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>随机抽奖活动</h1>
<button id="start">开始</button>
<button id="end">结束</button>
<div id="wp">中奖物品</div>
<script>
var ostart=document.getElementById('start');
var oend=document.getElementById('end');
var otxt=document.getElementById('wp');
var timer;
var m;
var list=['平板','现金200元','pad','购物卡','手机','购物卡','音响','电动车','现金200元','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢']
// 开始
ostart.onclick=function(){
timer=setInterval(function(){
// 产生随机数
m=parseInt(Math.random()*list.length);
// 修改html
otxt.innerHTML=list[m]
// 修改图片 .setAttribute('src',list[m])
},1000)
}
// 停止
oend.onclick=function(){
clearInterval(timer);
alert('恭喜抽中'+list[m]);
list.splice(m,1,'谢谢');
}
</script>
</body>
</html>效果如下：
二、每日一讲视频
每日一讲