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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
node中的cookie的具体使用
Sep 13 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
layui 弹出层值回传解决方式
Nov 14 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Less 安装及基本用法
2018/05/05 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
python将数组n等分的实例
2019/12/02 Python
python实现拼图小游戏
2020/02/22 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
中秋节超市促销方案
2014/01/30 职场文书
公益活动邀请函
2014/02/05 职场文书
期终自我鉴定
2014/02/17 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
Python django中如何使用restful框架
2021/06/23 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python