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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Python实现发送QQ邮件的封装
2017/07/14 Python
python实现简易云音乐播放器
2018/01/04 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
如何基于python实现归一化处理
2020/01/20 Python
pandas针对excel处理的实现
2021/01/15 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
大型活动组织方案
2014/05/10 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
文明单位申报材料
2014/12/23 职场文书
英语投诉信范文
2015/07/03 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js