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 大家可以参考下
Oct 13 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
使用JS动态显示文本
Sep 09 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
PHP取进制余数函数代码
2012/01/19 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python实现基本线性数据结构
2016/08/22 Python
Python操作csv文件实例详解
2017/07/31 Python
python实现教务管理系统
2018/03/12 Python
python并发和异步编程实例
2018/11/15 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
如何解决安装python3.6.1失败
2020/07/01 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
团代会闭幕词
2015/01/28 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
MySQL 语句执行顺序举例解析
2022/06/05 MySQL