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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 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实现读取一个1G的文件大小
2013/08/24 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
工业自动化专业自荐信范文
2014/04/10 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
舞出我人生观后感
2015/06/16 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫