适合javascript初学者的html制作

这也是本人初学javascript的时候做的快乐星期五的游戏活动模拟抽奖，比较基础，适合刚学习了js的伙伴们，希望能帮到你们。

代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>抽奖大轮盘</title><style>#disco{outline: none;position: fixed;top: 50px;left: 10px;}body{background: repeating-linear-gradient(to top,#50A3C4,#CBEBDB);background-size: 100%;height: 1080px;overflow: hidden;}.box{margin: 50px auto 0;padding: 20px;width:652px;height:652px;background-color: #FEFBF4;border:2px solid #E1CDA3;border-radius: 2%;display: flex;flex-wrap: wrap;/* background-image: url(img/图片1.png); */background-position:-130px -5px;background-size: 140% 105%;box-sizing: border-box;}#award{padding: 20px;width: 700px;height: 100px;margin: 20px auto;background-color: #FEFBF4;border:2px solid #E1CDA3;border-radius: 10px;font-size: 30px;}.box div{font-size: 40px;padding: 30px;width:184px;height: 184px;border-radius: 5%;margin: 9px;/* background-color: burlywood; */border: 2px solid #E1CDA3;box-sizing: border-box;}.box5{background-image: url(img/快乐星期五.jpg);background-size: cover;}a{text-decoration:none;color: #000000;}h1{margin-left: 45%;}.begin{outline: none;width: 80px;height: 50px;background-color: #FEFBF4;border:2px solid #E1CDA3;border-radius: 20px;       font-size: 30px;position: relative;left: 48%;padding: 5px;box-sizing: border-box;}</style></head><body><audio id="中奖" src="./mp3/中奖.mp3"></audio><audio id="切换" src="./mp3/切换音效.mp3"></audio><h1>抽奖大轮盘</h1><div class="box"><div class="box1">模仿秀</div><div class="box2">决战</div><div class="box3">积分+2</div><div class="box4">憨猪儿</div><div class="box5"></div><div class="box6">钉钉自拍配文</div><div class="box7">扳手腕</div><div class="box8">解锁新技能</div><div class="box9">一字马</div></div><div id="award">恭喜抽中:</div><script type="text/javascript">var box = document.querySelector(".box");var box1 = document.querySelector(".box1");var box2 = document.querySelector(".box2");var box3 = document.querySelector(".box3");var box4 = document.querySelector(".box4");var box5 = document.querySelector(".box5");var box6 = document.querySelector(".box6");var box7 = document.querySelector(".box7");var box8 = document.querySelector(".box8");var box9 = document.querySelector(".box9");var arr=["小组模仿国家队小姐姐座椅摇腿，积分+2","挑选其他小组划拳决战，输一次跪一只脚，第三次输再弯腰90度叫声大哥好！双方积分+1。","小组积分+2","全体现场自拍发钉钉群，配文小猪在线打卡，积分+1。","挑选其他小组，全体一字马，比谁长，挑战者胜积分+2，防守者胜防守者积分+1。","指定某组叉腰屁股写数字1到9，指定小组积分+1，被指定小组积分+2（bgm安排野狼disco）","选择其他组，双方代表进行扳手腕比赛，挑战者胜积分+2，防守者胜防守者积分+1。","蠢萌憨猪儿一只"];var flog=true;box5.onclick = function(){if(!flog){return;}flog=false;var num=Math.ceil(Math.random()*30)+50; //生成150到200的随机数if(num%8==0){num=Math.ceil(Math.random()*30)+50;}for (var i = 1; i<=num+1; i++) {(function(i){timer=setTimeout(function(){play3();play2();if(i==num+1){var award=arr[num%8-1];if(num%8==0){award=arr[7]}play1();document.getElementById("award").innerHTML = "恭喜抽中:\n"+award;flog=true;// alert("恭喜抽中:\n"+award);}else if(i%8==1){box1.style.backgroundColor = "#E1CDA3";box1.style.opacity=0.6;box4.style.backgroundColor = "transparent";}else if(i%8==2){box2.style.backgroundColor = "#E1CDA3";box2.style.opacity=0.6;box1.style.backgroundColor = "transparent";}else if(i%8==3){box3.style.backgroundColor = "#E1CDA3";box3.style.opacity=0.6;box2.style.backgroundColor = "transparent";}else if(i%8==4){box6.style.backgroundColor = "#E1CDA3";box6.style.opacity=0.6;box3.style.backgroundColor = "transparent";}else if(i%8==5){box9.style.backgroundColor = "#E1CDA3";box9.style.opacity=0.6;box6.style.backgroundColor = "transparent";}else if(i%8==6){box8.style.backgroundColor = "#E1CDA3";box8.style.opacity=0.6;box9.style.backgroundColor = "transparent";}else if(i%8==7){box7.style.backgroundColor = "#E1CDA3";box7.style.opacity=0.6;box8.style.backgroundColor = "transparent";}else if(i%8==0){box4.style.backgroundColor = "#E1CDA3";box4.style.opacity=0.6;box7.style.backgroundColor = "transparent";}},50*i*(1+i*0.02));})(i);}};</script><script type="text/javascript">function play1(){document.getElementById("中奖").play();}function play2(){document.getElementById("切换").play();document.getElementById("切换").volume = 0.5;//控制声音大小}function play3(){document.getElementById("切换").pause();//暂停document.getElementById("切换").currentTime = 0;//设置归0}</script></body>
</html>

项目结构

前端编程抽奖矩阵
- img
  - 快乐星期五.jpg
- mp3
  - 切换音效.mp3
  - 中奖.mp3
- 抽奖矩阵.html

所需的音频图片都可以用自己特定的，切换音效是抽奖矩阵滚动的音效（时间非常简短），中奖MP3就是抽奖矩阵出结果的音效，图片如下。

快乐星期五.jpg

只需要更改`<div class="box" >`里面子元素`div`的内容，以及对应数组`arr`里面的抽奖具体内容就可以实现diy抽奖，希望对各位有用！！！

纯javascript抽奖矩阵html分享相关推荐

【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作～
今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页: http://echarts.baidu.com/ 在首页有完整的 ...
python进行矩阵计算公式_纯python进行矩阵的相乘运算的方法示例
本文介绍了纯python进行矩阵的相乘运算的方法示例,分享给大家,具体如下: def matrixMultiply(A, B): # 获取A的行数和列数 A_row, A_col = shape(A) ...
python矩阵乘法算法_纯python进行矩阵的相乘运算的方法示例
本文介绍了纯python进行矩阵的相乘运算的方法示例,分享给大家,具体如下: def matrixMultiply(A, B): # 获取A的行数和列数 A_row, A_col = shape(A) ...
纯JavaScript入门级小游戏：兔子抢金币（附演示地址+源码）
Hello,大家好,我是兔哥,我又来分享好玩的入门级项目啦. 今天给大家带来的是一个纯JavaScript入门级小游戏:兔子抢金币,规则非常简单,控制屏幕上的兔子去接天上掉下来的金币,接满20个就可以 ...
纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
非常酷炫漂亮的3D立体照片展示墙纯JAVASCRIPT显示
今天主要给大家分享下一个3d显示照片墙的纯JavaScript效果demo,效果很酷炫.可以通过鼠标上下左右拉动,从而把照片墙进行360°展示. 鼠标停止后,在操作过程中,会发现,照片会以某角度轴,继 ...
青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 7（服务器连接数据处理）...
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
纯JavaScript实现弹出选择第几个单选按钮
为什么80%的码农都做不了架构师?>>> 纯JavaScript实现弹出选择第几个单选按钮 <div id="a" name="aa&quo ...
青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 3
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

纯javascript抽奖矩阵html分享

适合javascript初学者的html制作

代码如下

项目结构

所需的音频图片都可以用自己特定的，切换音效是抽奖矩阵滚动的音效（时间非常简短），中奖MP3就是抽奖矩阵出结果的音效，图片如下。

只需要更改`<div class="box" >`里面子元素`div`的内容，以及对应数组`arr`里面的抽奖具体内容就可以实现diy抽奖，希望对各位有用！！！

纯javascript抽奖矩阵html分享相关推荐

最新文章

热门文章

纯javascript抽奖矩阵html分享

适合javascript初学者的html制作

代码如下

项目结构

所需的音频图片都可以用自己特定的，切换音效是抽奖矩阵滚动的音效（时间非常简短），中奖MP3就是抽奖矩阵出结果的音效，图片如下。

只需要更改<div class="box" >里面子元素div的内容，以及对应数组arr里面的抽奖具体内容就可以实现diy抽奖，希望对各位有用！！！

纯javascript抽奖矩阵html分享相关推荐

最新文章

热门文章

只需要更改`<div class="box" >`里面子元素`div`的内容，以及对应数组`arr`里面的抽奖具体内容就可以实现diy抽奖，希望对各位有用！！！