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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
去除html代码里面的script正则方法
May 19 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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中session跨子域的三种实现方法
2016/07/25 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
scrapy爬虫实例分享
2017/12/28 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
普通简短的个人自我评价
2014/02/15 职场文书
保安2014年终工作总结
2014/12/06 职场文书
工作保证书怎么写
2015/02/28 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis