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数组求和的常用方法总结【5种方法】

    JS数组求和的常用方法总结【5种方法】

    这篇文章主要介绍了JS数组求和的常用方法,结合实例形式总结分析了5种数组求和的常见操作方法与相关处理技巧,需要的朋友可以参考下
    2019-01-01
  • js canvas实现橡皮擦效果

    js canvas实现橡皮擦效果

    这篇文章主要为大家详细介绍了使用Canvas实现橡皮擦效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JavaScript实现简单图片滚动附源码下载

    JavaScript实现简单图片滚动附源码下载

    JavaScript实现简单图片滚动,9张图告诉你,C罗欲哭无泪,另附源码下载,方便学习
    2014-06-06
  • JS实现图片延迟加载并淡入淡出效果的简单方法

    JS实现图片延迟加载并淡入淡出效果的简单方法

    我们大家都知道,对于一个网站最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,作为一个站长我们是千方百计的使用各种技巧来优化图片,但其实有一种简单的方法,只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果,下面一起来看看。
    2016-08-08
  • javascript实现类似百度分享功能的方法

    javascript实现类似百度分享功能的方法

    这篇文章主要介绍了javascript实现类似百度分享功能的方法,以实例形式较为完整的分析了基于javascript实现百度分享功能所涉及的样式与分享功能实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript的parseInt 进制问题

    JavaScript的parseInt 进制问题

    今天在整理以前写过的一段根据周期值自动计算下次执行日期的js代码,发现一bug,我使用parseInt对源数据串进行转换,当输入类似:2009-05-05时,parseInt将把串的05做8进制转换,这样结果自然就不对了。
    2009-05-05
  • Knockoutjs的环境搭建教程

    Knockoutjs的环境搭建教程

    最近要在项目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的环境搭建,并进行了一个简单的测试,需要的朋友可以了解下
    2012-11-11
  • fullpage.js全屏滚动插件使用实例

    fullpage.js全屏滚动插件使用实例

    这篇文章主要介绍了fullpage.js全屏滚动插件使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • js实现动态改变字体大小代码

    js实现动态改变字体大小代码

    本文为大家介绍下使用js如何实现动态改变字体大小,感兴趣的额朋友不要错过
    2014-01-01
  • Javascript this指针

    Javascript this指针

    Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象。
    2009-07-07

最新评论