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 相关文章推荐
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
js微信支付实现代码
Dec 22 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
js实现指定时间倒计时效果
Aug 26 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php数组查找函数总结
2014/11/18 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
python字典排序实例详解
2015/05/20 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python binascii 进制转换实例
2019/06/12 Python
Python 占位符的使用方法详解
2019/07/10 Python
python 模拟登陆163邮箱
2020/12/15 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
世界汽车零件:World Car Parts
2019/09/04 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
经济系大学生求职信
2013/10/01 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
神农溪导游词
2015/02/11 职场文书
同学聚会祝酒词
2015/08/10 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Python字典和列表性能之间的比较
2021/06/07 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技