当前位置：首页 > news >正文

web前端第三次作业

news 2025/8/12 19:57:59

一、使用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);// 修改htmlotxt.innerHTML=list[m]// 修改图片 .setAttribute('src',list[m])},1000)}// 停止oend.onclick=function(){	clearInterval(timer);alert('恭喜抽中'+list[m]);list.splice(m,1,'谢谢');}</script>
</body>
</html>

效果如下：