原生javascript实现抽奖动画

最新推荐文章于 2024-05-11 17:08:08 发布

原创

最新推荐文章于 2024-05-11 17:08:08 发布

· 1.3k 阅读

1 ·

版权

文章标签：

#javascript #初学者 #入门 #随机数

这篇博客演示如何使用原生JavaScript动态创建元素并实现一个简单的抽奖动画。通过生成随机数来选择中奖者，并改变选中项的背景色。用户可以点击开始和结束按钮进行抽奖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<title>动态增加元素</title>


<style type="text/css">

.son {
width: 100px;
background: palegreen;
float: left;
margin-left: 10px;
margin-bottom: 10px;
text-align: center;
font: bold 15px/100px "微软雅黑";
border-radius: 5px;
}

#parent {
width: 560px;
border: 1px solid #999;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
padding-top: 10px;
}

.btn {
width: 560px;
height: 30px;
margin: 0 auto;
border: 1px solid skyblue;
border-radius: 5px;
text-align: center;
}
.btn input {
margin: 0 20px;
height: 25px;
margin-top: 2px;
}

</style>


<script type="text/javascript">

var stus = ["甲","乙","丙","丁","赵","钱","孙","李"];

window.onload = function() {
// 通过js， 在页面创建5个div


var pdiv = document.getElementById("parent");