在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. 小试牛刀-hello,world!（第一个程序）

    1.打开python的IDLE,启动Python解释器(按键盘的windows键,然后输入IDLE),在提示符下>>>输入命令:print("hello,world!&qu ...

  2. 如何给LG gram写一个Linux下的驱动？

    其实就是实现一下几个Fn键的功能,没有标题吹得那么牛. 不知道为啥,LG gram这本子意外的小众. 就因为这个,装Linux遇到的硬件问题就没法在网上直接搜到解决办法了. Fn + F9 实现阅读模 ...

  3. 联赛%你测试10T2：漫无止境的八月

    题意: 思路: 有几个特殊的性质: 在不考虑q里面的单点修改,我们先只判断一个序列是否Yes. 我们注意到每次操作都是对一个长度为k的区间进行区间加减1的操作,所以我们如果将序列里面的数按%k分组,把 ...

  4. 自动化遍历-appcrawler

    下载appclawler 下载地址:https://pan.baidu.com/s/1dE0JDCH#list/path=%2F 查看帮助文档: java -jar appcrawler-2.4.0- ...

  5. Business Partner - 供应商与客户的集成 - S/4HANA（1）

    本文基于S/4HANA 1511版本,同时大部分内容适用于S/4HANA i.e1610/1709/1809. 本文旨在为全新实施的BP配置,或从ECC到S/4HANA的供应商客户主数据迁移提供信息支 ...

  6. 【API管理 APIM】APIM集成内部VNet时，常遇见的关于自定义DNS服务问题。

    问题描述 Azure 的APIM集成虚拟网络有两种方式,外部VNET, 内部VNET. 外部VNET,要求低,可以通过APIM访问VNET中的VM等资源,不需要配置自定义DNS服务器,这种方式下,AP ...

  7. linux 手动配置ip地址方法

    手工配置静态的IP地址 也就是手工配置IP地址.子网掩码.网关和DNS. 设置方法如下: vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑本地网卡的配置文 ...

  8. Rest Framework设计规范

    Rest Framework Rest Framework是前后端分离中用到的一种规范,它与框架本身无关,是一种软件架构风格,全称为Representational State Transfer. R ...

  9. Ubuntu 18.04 LTS IP 地址设置

    和之前的版本不太一样, Ubuntu 18.04 的 ip地址设置是用netplan管理的     配置文件在: /etc/netplan/50-cloud-init.yaml 示例文件如下: # T ...

  10. 标签平滑（Label Smoothing）详解

    什么是label smoothing? 标签平滑(Label smoothing),像L1.L2和dropout一样,是机器学习领域的一种正则化方法,通常用于分类问题,目的是防止模型在训练时过于自信地 ...