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 相关文章推荐
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JavaScript网页定位详解
Jan 13 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
jsTree使用记录实例
Dec 01 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
JavaScript轮播停留效果的实现思路
May 24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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 str_replace的替换漏洞
2008/03/15 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python实现转圈打印矩阵
2019/03/02 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
2014年重阳节敬老活动方案
2014/09/16 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
单位证明范文
2015/06/18 职场文书
初中语文教学研修日志
2015/11/13 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
Python实现视频自动打码的示例代码
2022/04/08 Python
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL