脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js网页抽奖

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 实现 input type="file" 文件上传示例代码

    js 实现 input type="file" 文件上传示例代码

    在开发中，文件上传必不可少但是它长得又丑、浏览的字样不能换，一般会让其隐藏点其他的标签（图片等）来时实现选择文件上传功能
    2013-08-08
  • javascript中setTimeout使用指南

    javascript中setTimeout使用指南

    本文给大家通过3个方法向大家展示了javascript中的setTimeout的使用，非常的简单，有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript实现数组元素增减的方法示例

    JavaScript实现数组元素增减的方法示例

    数组元素的增删是JavaScript的一个特点,因为其他很多编程语言的数组是不允许增加或者删除元素的,本文给大家介绍了JavaScript实现数组元素增减的方法示例,文中有相关的代码示例供大家参考,需要的朋友可以参考下
    2024-07-07
  • 如何在TypeScript中正确的遍历一个对象

    如何在TypeScript中正确的遍历一个对象

    在TypeScript里面,也会遇到需要遍历对象的时候,下面这篇文章主要给大家介绍了关于如何在TypeScript中正确的遍历一个对象的相关资料,需要的朋友可以参考下
    2022-03-03
  • JavaScript

    JavaScript"模拟事件"的注意要点详解

    今天小编就为大家分享一篇关于JavaScript"模拟事件"的注意要点详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-02-02
  • JavaScript实现兼容IE6的收起折叠与展开效果实例

    JavaScript实现兼容IE6的收起折叠与展开效果实例

    这篇文章主要介绍了JavaScript实现兼容IE6的收起折叠与展开效果,结合具体实例形式分析了javascript事件响应及针对页面元素属性的动态操作相关实现技巧,需要的朋友可以参考下
    2017-09-09
  • 7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)

    7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)

    7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)...
    2007-08-08
  • 2022发布ECMAScript新特性盘点

    2022发布ECMAScript新特性盘点

    这篇文章主要为大家介绍了2022发布ECMAScript新特性盘点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • JS实现css hover操作的方法示例

    JS实现css hover操作的方法示例

    这篇文章主要介绍了JS实现css hover操作的方法,涉及javascript事件响应及页面元素css属性动态操作相关技巧,需要的朋友可以参考下
    2017-04-04
  • echarts 3D地图为区域自定义颜色的解决方法

    echarts 3D地图为区域自定义颜色的解决方法

    在Echarts中,我们很多时候是需要给自己想要的几个区域的地图进行颜色高亮,这篇文章主要给大家介绍了关于echarts 3D地图为区域自定义颜色的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论