<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. C# 实现自定义的USB设备与上位机进行通信(上位机部分)

    因为以前没用过USB,对USB也不了解,于是上网查了很多资料,不过网上的资料都是零零散散,不清不楚的,于是我自己总结了一下,下面几个链接是网上这么多零散资料里,我觉得比较有参考意义的. USB设备连接 ...

  2. 使用Word2016直接发布博客

    使用Word2016直接发布博客

  3. maven tomcat 插件

    在 pom.xml 中添加如下内容 <!-- 配置 tomcat 插件 --> <build> <plugins> <plugin> <group ...

  4. 2015 Multi-University Training Contest 6 hdu 5362 Just A String

    Just A String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  5. BA--步进电机工作原理

    步进电机是将电脉冲信号转变为角位移或线位移的开环控制元步进电机件.在非超载的情况下,电机的转速.停止的位置只取决于脉冲信号的频率和脉冲数,而不受负载变化的影响,当步进驱动器接收到一个脉冲信号,它就驱动 ...

  6. [using_microsoft_infopath_2010]Chapter12 管理监视InfoPath表单服务

    本章概要: 1.在SharePoint中心控制台管理InfoPath设置 2.分析监视浏览器表单开考虑潜在性能问题 3.最小化回发数据

  7. POJ 2134

    这道题屡交屡错,什么鬼!!!!明明就是一个简单的BFS,啊~!!!!!~~~~~~就是一个简单的BFS!!!!~~~~~什么鬼!!!!!!! FUCK,在discuss里也很多人吐槽,怪不得那么少人做 ...

  8. Hadoop使用Java进行文件修改删除操作

    Hadoop使用Java进行文件修改删除操作 学习了:http://blog.csdn.net/menghuannvxia/article/details/44651061 学习了:http://bl ...

  9. 数据操作的封装--sqlhelper

    为了提高软件的灵活性和可维护性,软件的代码须要科学的管理.我们引入了架构这个词.设计模式提醒我们,软件中反复性的代码须要封装起来. 近期在做收费系统时.须要和数据库进行频繁的联系.既然是反复的使用,就 ...

  10. 回想四叉树LOD地形(上)

           唉.~事实上这是在差点儿相同一年前实现的东西,但当时没作好记录.放了那么久了,假设不做点总结的话,好像有点对不起自己,于是·········还是做点什么吧.        我脑洞比較小, ...