朋友公司开年会,帮忙写了个抽奖的demo,源码如下,github中有程序:

html:

 <header>
lottery demo
</header>
<div class="main">
<ul>
<li><img src="photos/name_s.jpg" alt="童年照" class="little_pic"></li>
<li><img src="1.jpg" alt="真相照" class="truth_pic"></li>
</ul>
<input type="button" value="开始" class="lottery">
<select class="prize">
<option value="1">一等奖</option>
<option value="2">二等奖</option>
<option value="3">三等奖</option>
</select>
<input type="button" value="真相" class="truth">
</div>
<footer>
<span class="prize_num"></span>
</footer>

css:

 body{
margin:;
padding:;
background-color: #4F81BC;
color: #fff;
text-align: center;
}
ul{
list-style-type: none;
}
header{
width: 500px;
margin: 100px auto 0 auto;
font-size: 24px; /* 显示“lottery demo”字体大小 */
/* border:1px solid #000; */
}
ul{
width: 800px; /* 两张图片共占的宽度 */
height: 400px; /* 显示图片的高度 */
margin:50px auto;
overflow: hidden;
}
li{
width: 50%;
float: left;
height: 100%;
}
img{
width: 100%;
height: 100%;
}
footer{
margin-top: 50px;
font-size: 24px; /* 显示“*等奖”字体大小 */
}

js:

 /* 20150609 */
var lottery = document.getElementsByClassName('lottery')[0];
var truth = document.getElementsByClassName('truth')[0];
var littlePic = document.getElementsByClassName('little_pic')[0];
var truthPic = document.getElementsByClassName('truth_pic')[0];
var prize = document.getElementsByClassName('prize')[0];
var prizeNum = document.getElementsByClassName('prize_num')[0];
var flag = 0;
var num = 0;
var timer;
var t_pic; function Game(){
this.namesArr=["name_查","name_萍","name_s"]; /*童年照片名*/
this.truthsArr=["p1","p2","p3"]; /*成年照片名,与上面的顺序对应*/
}; Game.prototype.init = function(){
lottery.value = "开始";
prizeNum.innerHTML = "一等奖";
}; Game.prototype.start = function(){
var names = this.namesArr;
var truths = this.truthsArr;
prize.addEventListener("change",function(evt){
var index = prize.selectedIndex;
getPrize(index);
},false); lottery.addEventListener("click",function(evt){
if(flag===0){
lottery.value = "停止";
flag=1;
truthPic.src = "1.jpg";
getPicName(names,truths);
}else{
lottery.value = "开始";
flag=0;
stopPic(names,truths);
}
},false); truth.addEventListener("click",function(evt){
truthPic.src = t_pic;
},false);
}; function getPicName(names,truths){
num = 0;
timer = setInterval(function(){
num++;
if(num===names.length){
num = 0;
}
littlePic.src = "photos/"+ names[num] +".jpg";
t_pic = "photos/"+ truths[num] +".jpg";
},100);
} function stopPic(names,truths){
clearInterval(timer);
if(names.length>=2){
names.splice(num,1);
truths.splice(num,1);
}else{
alert("Game over!");
}
} function getPrize(index){
prizeNum.innerHTML = prize.options[index].text;
} function play(){
var game = new Game();
game.init();
game.start();
} play();

可下载源码查看效果。

js一个抽奖的例子的更多相关文章

  1. js switch表达式的例子

    switch 这种表达式在很多语言中都有,比如java, C等待, 使用switch比使用if else 来得方便,来得清晰.  前言 switch 这种表达式在很多语言中都有,比如java, C等待 ...

  2. 用CSS实现一个抽奖转盘

    效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...

  3. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  4. css 如何“画”一个抽奖转盘

    主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...

  5. 跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击

    跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击 一.总结 一句话总结:比如用户留言功能,用户留言中写的是网页可执行代码,例如js代码,然后这段代码在可看到这段留言的不同一户的显示上就会 ...

  6. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  7. js 回调函数小例子

    js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...

  8. 用一个简单的例子来理解python高阶函数

    ============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...

  9. Spring-Context之一:一个简单的例子

    很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...

随机推荐

  1. Python之路,day5-Python基础

    for#列表生成式 data = [1,2,3,4,5,6,7] #####列表生成式 #data = [i+1 for i in data] data = [i*2 if i>5 else i ...

  2. Android学习九:屏幕自适应

    android中不同手机分辨率适配问题 在项目开发的过程中,同一个布局对应不同的手机会显示出不同的效果.导致这个现象产生的原因是不同手机的分辨率不同.在android sdk提供的帮助文档中,我们可以 ...

  3. notepad++

    plugin-manager 先要保证plugin-manager是最新的,然后才能下载其它的插件进行安装. compare插件,文件对比工具

  4. 【SharePoint学习笔记】第4章 SharePoint UI 定制

    第4章 SharePoint UI 定制   SharePoint 与 ASP.NET     好的​Asp.Net人员很快就能成为好的SharePoint开发人员     Web应用程序    Mi ...

  5. mysql主从复制+读写分离 菜鸟入门

    MYsql主从复制 1.mysql主从复制原理: Master将数据变化记录到二进制日志中[binary log] Slave将master的二进制日志[binary log]拷贝到自己的中继日志[r ...

  6. sql server中批量插入与更新两种解决方案分享

    若只是需要大批量插入数据使用bcp是最好的,若同时需要插入.删除.更新建议使用SqlDataAdapter我测试过有很高的效率,一般情况下这两种就满足需求了 bcp方式 复制代码 代码如下: /// ...

  7. ssh 发现了error while loading shared libraries这种错

    在Linux下运行程序时,发现了error while loading shared libraries这种错误,一时间不知道解决办法,在网上搜索,终于解决了: ./tests: error whil ...

  8. codeforces E. Famil Door and Roads 期望

    一棵树,n个节点,边长为1,有q个询问,每个询问给出u,v(u != v),问在树上等概率加一条边,如果使得u,v在一个环内,则这种加边方式是合法的,此时的值为环的长度,所有合法的加边方式出现的概率相 ...

  9. bug_ _ _常见的bug??

    ======= 7    Failure [INSTALL_FAILED_INVALID_APK] 执行  adb install -r test.apk.时出现错误  Failure [INSTAL ...

  10. Jackson的使用

    Jackson框架是基于Java平台的一套数据处理工具,被称为"最好的JavaJson解析器". Jackson框架包含了3个核心库:streaming,databind,anno ...