<!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. Linux常用命令之-删除文件

    在测试过程中,有时候会需要删除一些文件,例如日志文件过大等,这里汇总一些删除文件常用的命 已这个系统内的文件为例 删除文件(即这个文件被删除) 单个删除:rm -f + 文件名 eg:rm -f  2 ...

  2. 【托业】【全真题库】TEST1-语法题

    TEST01 103. delivery date 交货日期 delivery n.传送,投递; [法](正式)交付; 分娩; 讲演; 104. net revenue 净收入,纯收入 105. re ...

  3. CentOS7、REHL7的firewalld防火墙使用简单说明

    title: CentOS7.REHL7的firewalld防火墙使用简单说明 categories: Linux tags: - Linux timezone: Asia/Shanghai date ...

  4. flask shell命令

    在flask项目目录下,使用pipenv shell激活flask虚拟环境后,调用flask shell能够使用虚拟环境的python解释器进入交互式环境,并且工作目录还保留在flask项目目录. f ...

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

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

  6. 如何增加Ubuntu交换空间swap

    如何增加Ubuntu交换空间swap 1  使用命令查看系统内swap分区大小 green@green:~$ free -m total used free shared buff/cache ava ...

  7. CDI services--Scope（生命周期）&&EL.(Sp El)

    一.EL/SpEL 1.EL语言(CDI与表达式语言(EL)集成,允许在JavaServer Faces页面或JavaServer Pages页面中直接使用任何组件) 1)概述:EL是JSP内置的表达 ...

  8. jq元素拖拽

    <div id="a1"></div> js <script type="text/javascript"> $(funct ...

  9. C++---使用VS在C++编程中出现 fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "stdafx.h"”?

    啦啦啦,好久没写博客啦... 对于C++初学者来说适应一个新的编译器还是需要蛮长一段时间的,现在我就给你们说说标题所说的这个问题吧... 第一步:菜单--〉项目--〉设置,出现“项目设置”对话框,左边 ...

  10. docker实战---初级<1>

    第1章 docker容器 1.1 什么是容器 容器就是在隔离的环境运行的一个进程,如果进程停止,容器就会销毁.隔离的环境拥有自己的文件系统,ip地址,主机名等 1.2 容器与虚拟化的区别 linux容 ...