js原生实现抽奖活动（方形非圆盘）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#uls{
width: 500px;
height: 500px;
margin: 50px auto;
}
li{
width: 150px;
height: 150px;
background: skyblue;
float: left;
list-style: none;
margin:5px;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 20px;
font-weight: bold;
}
#uls li button{
width: 50px;
height: 30px;
}
.light{
width: 150px;
height: 150px;
background: #666;
color: #fff;
}
</style>
</head>
<body>
<ul id='uls'>
<li>600元优惠券</li>
<li>800元优惠券</li>
<li>1000元优惠券</li>
<li>800元优惠券</li>
<li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li>
<li>600元优惠券</li>
<li>600元优惠券</li>
<li>1000元优惠券</li>
<li>800元优惠券</li>
</ul>
<script>
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转
var lis=document.getElementsByTagName("li");
var num=0; //定义初识下标
btn1.onclick=function(){
btn1.disabled=true;
time=setInterval(function(){
lis[arr[num]].className="";
num++;
if(num>7){
num=0;
}
lis[arr[num]].className="light";
},50)
}
btn2.onclick=function(){
btn1.disabled=false;
clearInterval(time);
}
</script>
</body>
</html
！
js原生实现抽奖活动（方形非圆盘）的更多相关文章
- 15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- JS原生Date类型方法的一些冷知识
ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...
- 使用jQuery.makeArray() 将多种类型转换成JS原生Array
jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
随机推荐
- [elk]验证mapping字段数和数据字段数关系
验证一个mapping下字段缺少或者超过 结论: 没有什么不可以. 1.如果数据字段不在mapping里,则动态会更新mapping. 2.数据字段数也可以小于mapping里字段数 创建一个mapp ...
- nginx中的超时设置，请求超时、响应等待超时等
nginx比较强大,可以针对单个域名请求做出单个连接超时的配置. 比如些动态解释和静态解释可以根据业务的需求配置 proxy_connect_timeout :后端服务器连接的超时时间_发起握手等候响 ...
- 一小时上手Java 8新特性
一小时上手Java 8新特性 本文摘译自 https://www.journaldev.com/2389/java-8-features-with-examples,并做了适当增补. Iterable ...
- runTime动态给类添加属性
#项目中需要给系统类添加属性 #需要注意的地方就是.m中 set 和 get ,get方法中方法名和添加的属性名一致,set中可以用驼峰 #import <UIKit/UIKit.h> ...
- vue评论显示隐藏，JavaScript显示关闭
<template> <div id="vue_det"> <h1>{{details()}}</h1> <div>{{ ...
- django框架配置mysql数据库
django配置mysql数据库: 1.首先更改django项目文件中的settings.py的数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.d ...
- caffe中train过程的train数据集、val数据集、test时候的test数据集区别
val是validation的简称.training dataset 和 validation dataset都是在训练的时候起作用.而因为validation的数据集和training没有交集,所以 ...
- zookeeper注册与发现
pom.xml添加如下引用: <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId ...
- Unity3d中角色模型和角色名字保持相对位置
3D游戏中,经常遇到这样的情况.角色模型上需要显示角色名字或者血条等信息. 如果用一个摄像机会有可能出现名字或血条显示不正常等问题,所以我采用两个摄像机.一个渲染名字或血条等UI,另一个渲染角色模型. ...
- sql server中的开窗函数over、视图、事物
一.开窗函数over的作用有两个: 1.排序order by,row_number,翻页 2.划区partition by,结合聚合函数针对某部分数据进行汇总 翻页的sql server 语句: an ...