在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. iptables 和firewalld 区别

    在RHEL7里有几种防火墙共存:firewalld.iptables.ebtables,默认是使用firewalld来管理netfilter子系统,不过底层调用的命令仍然是iptables等. fir ...

  2. Springboot集成JUnit5优雅进行单元测试

    为什么使用JUnit5 JUnit4被广泛使用,但是许多场景下使用起来语法较为繁琐,JUnit5中支持lambda表达式,语法简单且代码不冗余. JUnit5易扩展,包容性强,可以接入其他的测试引擎. ...

  3. 多测师讲解自动化测试_rf测试报告_高级讲肖sir

    (一)运行失败 1.1 1.2 用例失败log 2.3Repor 1.4Output (二)运行成功 (三)分析报告 3.1  log: 3.2Report (测试报告) 3.3 Output

  4. win32获取进程树，以及命令行参数

    1.先上代码 package main import ( "bytes" "errors" "flag" "fmt" & ...

  5. 氵0x a

    从今天开始记录这些东西,希望以后自己不出现在这上

  6. centos平台scp通过密钥远程复制文件（免密登录）

    一,说明:两台机器的平台和ip 1,a服务器: centos8:ip:121.122.123.47 版本 [root@yjweb ~]# cat /etc/redhat-release CentOS ...

  7. centos8上使用lsblk查看块设备

    一,查看lsblk命令所属的rpm包 [root@yjweb ~]# whereis lsblk lsblk: /usr/bin/lsblk /usr/share/man/man8/lsblk.8.g ...

  8. Java 悲观锁 synchronized （member）{代码块}

    Java 如果遇到会出现高并发的情况,一般建议使用悲观锁 :synchronized (member){代码块}  需要对数据库进行修改或新增的时候,建议写上事务--@Transactional @T ...

  9. Java9系列第8篇-Module模块化编程

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  10. Python入门基础教程-准备工作

    作为一名Python的忠实爱好者,在Python的学习过程中趟过了很多坑.不论是在基础语法.爬虫.可视化的学习,亦或是在数据挖掘的项目开展中,整个过程有痛苦也有收获,有捶胸顿足也有仰天长笑.所以在以后 ...