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 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
MySQL修改密码方法总结
2008/03/25 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python中的Numpy入门教程
2014/04/26 Python
简单理解Python中的装饰器
2015/07/31 Python
Python循环语句中else的用法总结
2016/09/11 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python圣诞树编写实例详解
2020/02/13 Python
python输入中文的实例方法
2020/09/14 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
小学生暑假感言
2014/02/06 职场文书
关于环保的建议书400字
2014/03/12 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
经济纠纷起诉状
2015/05/20 职场文书
培训后的感想
2015/08/07 职场文书
初中数学教学反思范文
2016/02/17 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android