基于JavaScript与css实现网页随机抽奖功能
来源:互联网 发布:两个表格筛选不同数据 编辑:程序博客网 时间:2024/05/17 22:46
功能介绍:第一次按回车键,名单滚动,再按一次回车键暂停,抽到的人会从名单中移除并显示在中奖名单中,继续按回车键继续抽,最多抽3次.最终按esc键重置.
在开始和停止时都有不同的BGM和背景图片.
整体思路:这次的小程序比较简单,主要是利用随机数出去事先存在集合中的名字,与之前不同的是之前是java而这次是javascript,不过大体上差不多,知识细节有所差别,其中用到的
setInterval()函数和clearInterval()函数来实现不断地调用函数以达到滚动的目的,通过使用document.getElementById(id)来实现script与body的连接.通过innerHTML实现将值传递到组件中,通过使用splice()函数将集合中的某一元素去除,通过使用onkeydown来接受键盘指令,最后需要用到一些css指令来使界面看起来更漂亮.
核心代码如下:
function getName() {//产生随机数取到随机的名字index = Math.floor(Math.random()*list1.length) name1=list1[index];content.innerHTML = name1;return name1;}function start(){//开始滚动抽取status = true;count++;i = window.setInterval(getName,80);//每80MS调用一次函数bgm.src="source/bgm.mp3";bg.style.background = "url(img/bg.jpg)no-repeat";bg.style.backgroundSize = "100%";content.style.transform = "";}function stop(){//停止滚动status = false;//状态标记,用来标记此前状态是开始还是停止i = window.clearInterval(i);//停止之前的setIntervalcontent2.innerHTML += name1+'<br>';list1.splice(index,1);//将抽中的人从集合中去除bgm.src="source/cheer.mp3";content.style.transform = "rotate3d(2,2,3,360deg) scale(2,2)";bg.style.background = "url(img/08.jpg)no-repeat";return name1;}function choose(e){var keynum;if(window.event){keynum = e.keyCode;}else if(e.which){keynum = e.which;}if(keynum == 13 && status == 'false'&& count<3){//回车键 开始start();}else if(keynum == 13 && status =='true'){//当状态为开始时 回车键为结束stop();}else if(keynum == 27){//ESC键为重置list1 = list;count =0;status =false;content.innerHTML = "Enter键开始";content2.innerHTML = "";bgm.src="source/bgm.mp3";content.style.transform = "";bg.style.background = "url(img/bg.jpg)no-repeat";bg.style.backgroundSize = "100%";}else if(keynum == 13 && status == 'false'&& count == 3){content.innerHTML = "抽奖结束";bgm.src="source/bgm.mp3";}}
阅读全文
0 0
- 基于JavaScript与css实现网页随机抽奖功能
- Javascript+css 实现网页换肤功能
- Javascript+css 实现网页换肤功能
- 网页换肤功能实现,Javascript+css
- Javascript+css 实现网页换肤功能
- JavaScript+CSS实现网页换肤功能
- JavaScript+CSS实现网页换肤功能
- html+css+js实现抽奖功能
- JavaScript随机抽奖
- .net 指定奖品概率随机抽奖功能实现
- jQuery实现随机抽奖
- 用JavaScript结合CSS实现网页换肤功能
- Javascript配合CSS实现网页自助换肤功能
- CSS实现网页遮罩层功能
- 实现网页随机登陆验证码功能
- 随机抽奖程序的实现
- 随机函数实现抽奖(1)
- 随机函数实现抽奖(2)
- 堆和栈的区别
- 9. Palindrome Number
- 有关最短路径
- Hibernate--与Spring整合及增删改查
- Java集合之HashMap源码分析
- 基于JavaScript与css实现网页随机抽奖功能
- JAVA_基础
- 安装pip
- Linux命令(13)——cut命令
- 明明的随机数问题,亲测通过
- Scala Maximum Subarray 最大子串 leetcode 53
- Vim配置和插件
- UVA 674 Coin Change(完全背包)
- oo