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宝典学习笔记(上)
Jan 10 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
将查询条件的input、select清空
Jan 14 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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&amp;&amp;mysql)五
2006/10/09 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php常用数学函数汇总
2014/11/21 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
js常见表单应用技巧
2008/01/09 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
jQuery实现frame之间互通的方法
2017/06/26 jQuery
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python类中super()和__init__()的区别
2016/10/18 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
20个常用Python运维库和模块
2018/02/12 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
建筑安全责任书范本
2014/07/24 职场文书
采购员岗位职责
2015/02/03 职场文书
2015毕业寄语大全
2015/02/26 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
小学工作总结2015
2015/05/04 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书