web前端第三次作业

InaT2025-08-12 9:39
一、使用js完成抽奖项目效果和内容自定义
代码如下：
html 复制代码
<!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>
效果如下：
二、每日一讲视频
每日一讲