js实现网页抽奖实例

 更新时间:2015年08月05日 17:46:06   作者:皮蛋  
这篇文章主要介绍了js实现网页抽奖的方法,实例分析了javascript随机数及时间函数的相关使用技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了js实现网页抽奖的方法。分享给大家供大家参考。具体如下:

这段网页抽奖程序,基于javascript代码实现,简单的演示如何使用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程序设计有所帮助。

相关文章

  • JS实现简易贪吃蛇游戏

    JS实现简易贪吃蛇游戏

    这篇文章主要为大家详细介绍了JS实现简易贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS模拟按钮点击功能的方法

    JS模拟按钮点击功能的方法

    这篇文章主要介绍了JS模拟按钮点击功能的方法,结合实例形式分析了JavaScript模拟点击按钮事件的实现技巧,并附带了JavaScript模拟点击链接的实现方法,需要的朋友可以参考下
    2015-12-12
  • 学前端,css与javascript重难点浅析

    学前端,css与javascript重难点浅析

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,CSS(Cascading Style Sheet)层叠样式表单,今天给大家分享css与javascript重难点,感兴趣的朋友一起看看吧
    2020-06-06
  • 详解JavaScript常量定义

    详解JavaScript常量定义

    本文主要对JavaScript常量定义进行详细介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序自定义select下拉选项框组件的实现代码

    微信小程序自定义select下拉选项框组件的实现代码

    微信小程序中没有select下拉选项框,所以只有自定义。这篇文章主要介绍了微信小程序自定义select下拉选项框组件,需要的朋友可以参考下
    2018-08-08
  • js实现数组冒泡排序、快速排序原理

    js实现数组冒泡排序、快速排序原理

    这篇文章主要为大家详细介绍了js实现数组冒泡排序、快速排序的原理,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    这篇文章主要介绍了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法,较为详细的分析了预览图片接口及与拍照或手机相册中选图接口的功能、调用方法与相关使用技巧,需要的朋友可以参考下
    2016-10-10
  • js插件实现图片滑动验证码

    js插件实现图片滑动验证码

    这篇文章主要为大家详细介绍了js插件实现图片滑动验证码,滑动模块,实现验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • ie focus bug 解决方法

    ie focus bug 解决方法

    在IE中,新创建的input没有如预期的获得焦点。
    2009-09-09
  • 微信小程序实现左滑动删除效果

    微信小程序实现左滑动删除效果

    这篇文章主要为大家详细介绍了微信小程序实现左滑动删除效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07

最新评论