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 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
Python中函数的用法实例教程
2014/09/08 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python六大开源框架对比
2015/10/19 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
django修改models重建数据库的操作
2020/03/31 Python
Python如何获取文件指定行的内容
2020/05/27 Python
C语言编程练习
2012/04/02 面试题
C语言50道问题
2014/10/23 面试题
金融系毕业生自荐书
2014/07/08 职场文书
防火标语大全
2014/10/06 职场文书
2015年企业新年寄语
2014/12/08 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
关于python中模块和重载的问题
2021/11/02 Python