<!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原生实现抽奖活动（方形非圆盘）的更多相关文章

  1. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  2. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  3. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  4. 使用jQuery.makeArray() 将多种类型转换成JS原生Array

    jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...

  5. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

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

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

  7. js 控制Div循环显示 非插件版

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

  8. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  9. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

随机推荐

  1. hisi35xx串口驱动的完善

    鉴于hisi的uart3还没有打通,ls /dev/ | grep ttyA* ,看到的只有ttyAMA0 和ttyAMA1,且使用应用程序打开ttyAMA1设备后,使用write函数,发送,示波器观 ...

  2. app启动过程

    调用main函数之前: App开始启动后,系统首先加载可执行文件(自身App的所有.o文件的集合),然后加载动态链接库dyld.交由 ImageLoader 读取 image,其中包含了我们的类.方法 ...

  3. opencart3属性attribute实现换行等简单html代码

    opencart3属性attribute在前台页面默认是没有解析html代码功能的,比如想实现换行,后台这样写:line 1<br>line 2,但前台产品页也是line 1<br& ...

  4. 一篇文章彻底弄懂Base64编码原理

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博文带领大家了解一下Base64的底层实现. Base64的由来 目前Base64已经成为网 ...

  5. Nginx与PHP-FPM运行原理详解

    目录 1. 代理与反向代理 1. 正向代理:访问google.com 2. 反向代理:通过反向代理实现负载均衡 2. 初识Nginx与PHP-FPM 1. Nginx是什么 2. CGI与FastCG ...

  6. SQL SERVER-时间戳(timestamp)与时间格式(datetime)互相转换

    SQL里面有个DATEADD的函数.时间戳就是一个从1970-01-01 08:00:00到时间的相隔的秒数.所以只要把这个时间戳加上1970-01-01 08:00:00这个时间就可以得到你想要的时 ...

  7. weixin://connectToFreeWifi/协议如何跳转到微信客户端打开在wifi指定任意网页？

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. static 关键字的作用

    在C语言中,关键字static有三个明显的作用: 1)在函数体内,一个被声明为静态的变量在这一函数被调用过程中维持其值不变(该变量存放在静态变量区). 2) 在模块内(但在函数体外),一个被声明为静态 ...

  9. idea (2018.09) 安装破解mybatis plugin

    本来打算安装的是mybatis plugin最新版本(4.0.4) 但是安装下来发现lib目录中少mybatis_plugin.jar包 只有手动安装了这里安装的是2.9.2版本使用了一下不受影响 破 ...

  10. web自动化测试python+selenium学习总结----python环境安装

    一.python下载地址:https://www.python.org/downloads/ 二.双击python的.exe文件安装: 后面直接点击“next” 步骤二:选择安装在D:\python3 ...