在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. 多测师讲解_肖sir _rf报错归纳（1）：

    错误一: 报错原因:文件格式 解决方案: 修改文件格式,将txt改成robot格式   错误二: rf 运行以后出现乱码现象 解决方案: 打开python的安装路径下:C:\python37\Lib\ ...

  2. 多测师讲解pthon_re模块_高级讲师肖sir

    #import re   一.我们就re模块(也叫正则模块)介绍: 实现一个编译查找,一般在日志处理或者文件处理时用的比较多 正则表达式主要用于模式匹配和替换工作.     预定义字符集匹配: \d: ...

  3. Go net/http包

    net/http包 net/http是Go语言的内置包,它可以来创建HTTP客户端与服务端. 并且由net/http包创建的服务端性能十分高效,甚至不用nginx部署. client端 GET请求 以 ...

  4. 【最短路】HDU 1688 Sightseeing

    题目大意 给出一个有向图(可能存在重边),求从\(S\)到\(F\)最短路的条数,如果次短路的长度仅比最短路的长度多1,那么再加上次短路的条数. 输入格式 第一行是数据组数\(T\). 对于魅族数据, ...

  5. 第五章 Linux操作系统关机、重启、注销及其查看ip命令

    一.更新系统时间与网络时间同步 1.  安装ntpdate工具 # yum -y install ntp ntpdate 2.  设置系统时间与网络时间同步 # ntpdate cn.pool.ntp ...

  6. C++学习---单链表的构建及操作

    #include <iostream> using namespace std; typedef struct LinkNode { int elem;//节点中的数据 struct Li ...

  7. C++学习笔记---引用的本质

    本质:引用本质上是C++内部实现的一个指针常量 发现是引用的话,自动帮我们转换成指针常量 运行后,发现修改ref的值那么a的值也会一起改变,这就说明了引用的本质就是指针

  8. python执行 sql 语句

    写的很好 import pymysql conn = pymysql.connect(host = '127.0.0.1',port = 3306,user = 'root',passwd = '12 ...

  9. vue生命钩子函数

    vue的生命钩子函数在使用Vue开发中是非常重要的一环,可以说,生命钩子函数使开发变得更加便捷. 下图是Vue的生命周期图: 具体钩子如下: beforeCreate created beforeMo ...

  10. Linux服务器部署redis常见问题处理

    redis开启和禁用登陆密码校验 1. 开启登陆密码校验 在redis-cli命令行工具中执行如下命令: config set requirepass yourpassword2. 禁用登陆密码校验 ...