在A、B、C三个区块中，有且仅有一个红色，要求红色每隔一秒即进入下一个区块，变色过程不断循环往复。

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JS小案例：循环变色的区块</title>

  <style>

    .div {

      width: 100px;

      height: 100px;

      margin: 50px;

      border: 1px black solid;

      float: left;

    }

    .red {

      background: red;

    }

  </style>

  <script>

    window.onload = function () {

      var aDiv = document.getElementsByClassName('div');

      var start = 0;

      var timer = setInterval(function () {

        start++;

        if (start > 2) {

          start = 0;

        }

        for (var i = 0; i < aDiv.length; i++) {

          aDiv[i].className = 'div';

        }

        aDiv[start].className = 'div red';

      }, 1000);

    }

  </script>

</head>

<body>

  <div class='div red'></div>

  <div class='div '></div>

  <div class='div '></div>

</body>

</html>

　　

JS小案例：循环间隔重复变色的更多相关文章

  1. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  2. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  3. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  4. JS小案例(基础好烦恼少)----持续更新

    *************************************************** <!DOCTYPE html> <html lang="en&quo ...

  5. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  6. node.js(小案例)_使用mongodb对学生信息列表优化

    一.前言 1.这篇文章主要对上一篇案列在操作增删改的时候使用mongodb进行优化 2.项目源码(包含上):https://github.com/4561231/crud-express-node.g ...

  7. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  8. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  9. opencv.js小案例

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

随机推荐

  1. docker overlay原理

    周末两天研究了一下docker overlay网络的原理,因为我本身对go语言不太熟悉,直接看docker官方的libnetwork库看不太懂,看linux内核的vxlan代码又粗心大意,导致有一个环 ...

  2. MeteoInfoLab脚本示例：inpolygon

    inpollygon函数是用来判断带坐标(x/y)的数据是否在某个或者一组多边形(Polygon)中,返回的结果中如果做多边形内则值为1,否则值为-1.下面一个例子演示了利用一个shape文件和inp ...

  3. 在shell中截取心仪的字符串

    file=/dir1/dir2/dir3/my.file.txt ${file#*/} 去掉左边 ${file##*/} 去掉左边最后一个 ${file%/*} 去掉右边 ${file%%/*} 去掉 ...

  4. Ubuntu服务安装

    一.ifconfig命令安装 sudo apt install net-tools 二.ssh服务安装 sudo apt-get install openssh-server netstat -ltn ...

  5. MySQL5.6的二进制安装

    5.6 5.7 用的最多 差别不大. 首先从网上下在二进制文件 先去官网找到自己想要的版本 https://dev.mysql.com/downloads/mysql/ https://dev.mys ...

  6. Java进阶--Java动态代理

    JDK version: 1.8 动态代理中所说的"动态", 是针对使用Java代码实际编写了代理类的"静态"代理而言的, 它的优势不在于省去了编写代理类那一点 ...

  7. 【多次实践】win10+ubuntu18.04lts双系统安装葵花宝典（安装篇）

    这个教程诞生的缘由很简单,吃的太饱,硬是要折腾,结果,这一折腾便是20余小时,故写此文,帮助后来者少走弯路! 在本文开始,请先允许我对网上很多类似的教程嗤之以鼻,很成功地让我走了很多的弯路,一些有效简 ...

  8. GDB常用调试命令（二）

    GDB信号处理 在GDB中使用handle命令定义一个信号处理.信号可以以SIG开头或不以 SIG开头,可以用定义一个要处理信号的范围(如:SIGIO-SIGKILL,表示处理从SIGIO信号到SIG ...

  9. IDEA2020.2版本无法开启KDE全局菜单的解决方案

    IDEA2020.2版本无法开启KDE全局菜单的解决方案 前言 :更新了2020.2之后全局菜单一直不生效,一直找不到解决的办法,就退回了2020.1,今天又试了一次,成功解决全局菜单显示问题. 之前 ...

  10. 创建Sqlite数据库(一)

    对这方面的掌握不牢,慢慢深入吧,先执行一个sqlite语句,只会简单的.输出"创建"证明创建成功 public class MainActivity extends AppComp ...