6个DIV 135或246间隔一秒轮番显示效果

在某技术群看到 A君 提出的如下一个问题:

A君

6个DIV 间隔一秒 轮番进行奇偶显示. 比如先135 一秒后 246 然后再135 循环

A君

要求代码短小精悍

B君


代码如下:

var a = document.getElementsByTagName('div');
var b = false;
setInterval(function() {
for (var i = 0; i < 6; i++)
a[i].style.display = ((i & 1) ^ b) ? 'block' : 'none';
b = !b;

}, 1000);

A君
D君这个效率不错啊
我这个不如abcd的简洁


代码如下:

j++; for (var i = 0; i < 6; i++) o[i].style.display = [['block', 'none'], ['none', 'block']][j & 1][i & 1];

D君
用数组，也影响效率

看完不得感叹 D君 的方法真的很好，如果是我真的想不出如此高效率的方法。

赞 (0)

相关推荐

  • 6个DIV 135或246间隔一秒轮番显示效果

    在某技术群看到 A君 提出的如下一个问题: A君 6个DIV 间隔一秒 轮番进行奇偶显示. 比如先135 一秒后 246 然后再135 循环 A君 要求代码短小精悍 B君 复制代码 代码如下: var a = document.getElementsByTagName('div'); var b = false; setInterval(function() { for (var i = 0; i < 6; i++) a[i].style.display = ((i & 1) ^ b) ?

  • 基于Jquery ajax技术实现间隔N秒向某页面传值

    有时候我们需要每隔一段时间向某页面传值,比如说聊天室,每隔几秒就像数据库处理页面传值并取回,然后显示在聊天窗口.又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟,如果是则将用户退出.这个时候我们就要用到HTML DOM setInterval() 方法. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回

  • JavaScript Alert通用美化类

    function sAlert(msg,boxtype,func,msgtitle) sAlert('信息内容',1,'','信息标题') @msg:提示信息内容 @boxtype:1为弹出框,2为确认框,3为提示框 @func:点确认时执行的函数 @title:信息框标题文字内容 只有msg是必须的,后面的参数可以省略.如果中间的参数为空则在对应位置上''或者""表示(根据实际情况选择单双引号) 调用此方法须在每个使用的页面的head区域加入下面代码. 复制代码 代码如下: <

  • jQuery+Ajax实现限制查询间隔的方法

    本文实例讲述了jQuery+Ajax实现限制查询间隔的方法.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery20150305.aspx.cs" Inherits="Jquery20150305" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • js定时器(执行一次、重复执行)

    1,只执行一次的定时器 复制代码 代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 </scrip

  • JS在一定时间内跳转页面及各种刷新页面的实现方法

    1.js 代码: <SCRIPT LANGUAGE="JavaScript"> var time = 5; //时间,秒 var timelong = 0; function diplaytime(){ //时间递减 document.all.his.innerHTML = time -timelong ; timelong ++; } function redirect(){ //跳转页 //history.back(); window.location.href=&qu

  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • js实现图片点击左右轮播

    js实现图片点击左右轮播

    这个 相当于一个小框架,拿来就可以用: 1. 功能: 如上图显示: 点击左右两个button,可以实现图片向左右滚动,也可以设置在多少秒自己滚动. 2. 首先建立一个js文件,文件名为play.js(只要和HTML中的引入相同就可以了): var sina = { $: function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")')

  • js定时器的使用(实例讲解)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定时器:timename=setInterval("function();",delaytime); 第一个参数"function()"是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用":"隔开即可.比如要弹出两个警告窗口,便可将

随机推荐