js实现网页抽奖实例


Posted in Javascript onAugust 05, 2015

本文实例讲述了js实现网页抽奖的方法。分享给大家供大家参考。具体如下:

这段网页抽奖程序,基于javascript代码实现,简单的演示如何使用JS来实现抽奖功能,点击“开始抽奖”按钮,程序即开始抽奖了,需要停止的时候按“停止”,以前发过类似的抽奖程序有几个了,有兴趣的自己在本站网页特效栏目搜索“抽奖”看下。

运行效果如下图所示:

js实现网页抽奖实例

具体代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<title>抽奖程序</title>
<script type="text/javascript"> 
var randNum=Math.random()*10;
function testTime(){
document.getElementById("testtime").innerHTML="<h2>"+Math.floor(Math.random()*10)+"</h2>";
}
function setTime(mark){
timer=null;
timer=setInterval(testTime,12);
if(mark=='stop'){
  clearInterval(timer);
}
return timer;
}
function clearTime(timer){ }
</script>
<style type="text/css">
<!--
body {font-family: Arial;color:#fff;margin: 0px;padding: 0px;background:#000;text-align:center;}
#happyness{font-size:186px;line-height:186px;margin-top:100px;}
-->
</style>
</head>
<body>
</body>
<button onClick="timer=setInterval(testTime,12);" value="" style="width:100px;height:30px">开始抽奖</button>
<button onClick="clearInterval(timer);" value="Stop" style="width:100px;height:30px">停止</button>
<div id="testtime" style="font-size:25px"></div>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 #Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 #Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 #Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 #Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 #Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 #Javascript
You might like
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python如何实现视频转代码视频
2019/06/17 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python使用列表的最佳方案
2020/08/12 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
收入证明范本
2015/06/12 职场文书
谢师宴学生致辞
2015/07/27 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
这样写python注释让代码更加的优雅
2021/06/02 Python
redis实现的四种常见限流策略
2021/06/18 Redis
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript