<div>代码

按钮代码

JS原生代码

 完整的代码:

 <div style="width:365px;height:300px;border:2px solid green" id="names">
<script>
for (var i = 1; i <= 40; i++) {
document.write(
'<div style="width:45px;height:35px;background:#ccc;float:left;border:2px solid white;text-align:center;padding-top:7px;">' +
i + '</div>')
}
</script>
</div>

  

<a href="javascript:oaction()" style="margin:5px;">开始抽奖</a>
<a href="javascript:clearInterval(sh)" style="margin:5px;">停止抽奖</a>

  

<script>
var names = document.getElementById("names").getElementsByTagName("div");
var length = names.length;
var oldNum = 0;
var sh; function run() {
var num = Math.floor((Math.random() * 40));
names[oldNum].style.background = "#ccc";
oldNum = num;
names[num].style.background = "green";
} function oaction() {
sh = setInterval(run, 30)
}
</script>

  

<a href="javascript:oaction()" style="margin:5px;">开始抽奖</a>
<a href="javascript:clearInterval(sh)" style="margin:5px;">停止抽奖</a>

Js原生实现抽奖功能的更多相关文章

  1. js原生实现选项卡功能

    选项卡在js中是一个重要的知识点.他没有那么难,但在工作中却有重要的位置.几乎在每一个网站都能看到选项卡的实例.所以今天写一下选项卡的实现. 我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的 ...

  2. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  3. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  4. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  5. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  6. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  7. 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  8. 原生JavaScript运动功能系列(五):定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  9. 原生JavaScript运动功能系列(四):多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

随机推荐

  1. 【hiho一下 第九周】 状态压缩·二

    [题目链接]:http://hihocoder.com/problemset/problem/1048 [题意] [题解] 按从左到右然后从上到下的顺序; 依次枚举每个格子是竖条还是横条; 然后在搜索 ...

  2. Tensorflow MNIST 数据集测试代码入门

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50614444 测试代码已上传至GitH ...

  3. Eclipse中项目去除Js验证

    删除项目.project文件中的 <buildCommand>   <name>org.eclipse.wst.jsdt.core.javascriptValidator< ...

  4. Oracle里schema理解

    在Oracle中,一个用户就是一个Schema,表都是建立在Schema中的,也可以理解为每个用户拥有不同的表.一个用户想访问另外一个用户,也就是另外一个schema的表的时候,可以用 usernam ...

  5. rails 修改数据库之后注意修改controller

    rails 修改数据库之后注意修改controller 在view中进行修改之后,注意修改controller中的内容: 这样才可以进行参数的传递:

  6. 页面与后台传递中文乱码问题(java乱码)

    1.前台中文传递到后台乱码. 前台不须要处理, 系统一般都会默认把中文转化为ISO-8859-1类型. 仅仅需在后台接受数据是处理 Str为前台传过来的中文字符串: String inputer = ...

  7. iOS开发实践之网络检測Reachability

    在网络应用开发中.有时须要对用户设备的网络状态进行实时监控.以至于对用户进行友好提示 或者依据不同网络状态处理不一样的逻辑(如视频播放app,依据当前的网络情况自己主动切换视频清晰度等等).用Reac ...

  8. 有关计数问题的DP 划分数

    有n个无差别的物品,将它们划分成不超过m组.求出划分方法数模M的余数. 输入: 3 4 10000 输出: 4(1+1+2=1+3=2+2=4) 定义:dp[i][j] = j的i划分的总数 #inc ...

  9. CentOS 6 安装最新的 Redis 2.8 ,安装 TCMalloc

    1,遇到的问题就是 redis 2.8 版本号依赖 Google 的 TCMalloc TCMalloc(Thread-Caching Malloc)是google开发的开源工具──"goo ...

  10. nyoj--120--校园网络(scc+缩点)

    校园网络 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 南阳理工学院共有M个系,分别编号1~M,其中各个系之间达成有一定的协议,如果某系有新软件可用时,该系将允许一些其 ...