Js原生实现抽奖功能

<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>
Js原生实现抽奖功能的更多相关文章
- js原生实现选项卡功能
选项卡在js中是一个重要的知识点.他没有那么难,但在工作中却有重要的位置.几乎在每一个网站都能看到选项卡的实例.所以今天写一下选项卡的实现. 我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的 ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- JS原生Ajax&Jquery的Ajax技术&Json
1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- 原生JavaScript运动功能系列(五):定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- 原生JavaScript运动功能系列(四):多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
随机推荐
- 自学python 第二天
1. if基本语句 if 条件: 内部代码块 else: .. . .. . . print(“........”) if 1 == 1 : print(“a会所”) print(“b会所”) e ...
- spring md5 加密
一.spring 自带的 DigestUtils 工具类可以进行 md5 加密 //导入包 import org.springframework.util.DigestUtils; //对密码进行 m ...
- 使用angularjs的$http.post异步提交数据时,服务器接收不了的问题
一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型, 提交数据格式如下: 二,使用angul ...
- 《SAS编程与数据挖掘商业案例》学习笔记之十五
继续<SAS编程与数据挖掘商业案例>读书笔记,本次重点:输出控制 主要内容包含:log窗体输出控制.output窗体输出控制.ods输出控制 1.log窗体输出控制 将日志输出到外部文件 ...
- 图像算法研究---Adaboost算法具体解释
本篇文章先介绍了提升放法和AdaBoost算法.已经了解的可以直接跳过.后面给出了AdaBoost算法的两个样例.附有详细计算过程. 1.提升方法(来源于统计学习方法) 提升方法是一种经常使用的统计学 ...
- Android scrollTo() scrollBy() Scroller解说及应用
版本号:1.0 日期:2014.6.17 2014.6.18 版权:© 2014 kince 转载注明出处 scrollTo() .scrollBy()及 Scroller在视图滑动中常常使用 ...
- Codeforces Round #260 (Div. 1)——Civilization
题目链接 题意: n个点,m条边的森林.q次操作. 每次操作:1.询问x所在树的直径 2.合并x和y所在的树,使得合并后的直径最小 ) 分析: 没有读到图是森林.. .做的好纠结 最開始将每一个树都求 ...
- SQL 导出数据字典
用于参考: SELECT 表名=case when a.colorder=1 then d.name else '' end, 表说明=case w ...
- kettle的下载、安装和初步使用(Ubuntu 16.04平台下)(图文详解)
不多说,直接上干货! 能够看我这篇博客的博友们,想必是已经具备一定基础了. 扩展博客 kettle的下载.安装和初步使用(windows平台下)(图文详解) kettle的下载 Kettle可以在h ...
- 基于 Web 的 Go 语言 IDE - Wide 1.3.0 发布!
http://symphony.b3log.org/article/1437292757551 欢迎各位提意见.建议,参与到 Wide 开源项目中 :-)