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 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
JavaScript简介
Feb 15 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
jQuery实现日历效果
Sep 11 jQuery
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数据库连接类~~做成一个分页类!
2006/11/25 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python科学计算之Pandas详解
2017/01/15 Python
Python 私有函数的实例详解
2017/09/11 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python实现按行分割文件
2019/07/22 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
数据库基础的一些面试题
2012/02/25 面试题
英语专业学生个人求职信范文
2014/01/06 职场文书
应用外语系自荐信
2014/06/26 职场文书
1000字打架检讨书
2014/11/03 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript