制作一个简易的抽奖系统！欢迎大家学习！
JS原理：建立一个数组用来存储抽奖内容，例如 iphone6 等，当点击开始的时候，开启定时器,产生一个随机数，把对应文本的innerHTML改成数组所对应的内容。
如果想让某个抽奖几率变高，可以让数组中某个值重复次数多点。接下来看代码。、
JavaScript代码
window.onload = function(){
var data = [
"iphone 6s plus",
"苹果Mac 笔记本",
"美的洗衣机",
"凌美钢笔",
"谢谢参与",
"索尼入耳式耳机",
"雷柏机械键盘",
"《javaScript高级程序设计》",
"精美保温杯",
"维尼小熊一只",
"500元中国石化加油卡",
"爱奇艺年费会员",
"iPad mini",
"32G U盘",
];
var bStop = true;
var timer = null;
var btns = document.getElementById('btns').getElementsByTagName('span');
var text = document.getElementById('text');
btns[0].onclick = start;
btns[1].onclick = stop;
document.onkeyup = function(event){
event = event||window.event;
if(event.keyCode==13){
if(bStop){
start();
}else {
stop();
}
}
}
function start(){
clearInterval(timer);
timer = setInterval(function(){
var r = Math.floor(Math.random()*data.length);
text.innerHTML = data[r];
},20);
btns[0].style.background = '#666';
bStop = false;
}
function stop(){
clearInterval(timer);
btns[0].style.background = 'blue';
bStop = true;
}
}
html css 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖啦</title>
<style>
* {
margin: 0;
padding:0;
}
#container {
width: 500px;
height: 200px;
margin: 100px auto;
background: red;
position: relative;
padding-top: 20px;
}
#container p {
position: absolute;
bottom: 4px;
left: 30px;
}
#btns {
position: absolute;
left: 118px;
bottom: 30px;
}
#container h1 {
color: #fff;
text-align: center;
}
#btn-start,#btn-stop {
width: 100px;
height: 60px;
background: blue;
text-align: center;
line-height: 60px;
font-size: 20px;
display: inline-block;
color: #fff;
margin-right: 60px;
border-radius: 10px;
cursor: pointer;
}
</style>
<script src="/UploadFiles/2021-04-02/index.js">
希望本文所述对大家的学习有所帮助，轻松实现抽奖系统。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“javascript实现可键盘控制的抽奖系统”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。