在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. devops-jenkins-Pipeline基础语法

    1. jenkins-Pipeline基础语法  1) jenkins-Pipeline总体介绍 • Pipeline,简而言之,就是一套运行与jenkins上的工作流框架,将原本独立运行于单个或多个 ...

  2. RFC 8684---TCP Extensions for Multipath Operation with Multiple Addresses

    https://datatracker.ietf.org/doc/rfc8684/?include_text=1 TCP Extensions for Multipath Operation with ...

  3. layui+tp5表单提交回调

    layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...

  4. 初始python的类

    面向对象 一.面向对象 优点: 面向对象编程:是一类相似功能函数的集合,使你的代码更清晰化,更合理化. 面向对象,要拥有上帝的视角看问题,类其实就是一个公共模板,对象就从具体的模板实例化出来 类:就是 ...

  5. python练习三角形，99乘法

    #方案一:# result=0# #列# for i in range(1,10):# #行# for j in range(1,i+1):# result=i*j# print('%d*%d=%d' ...

  6. 手把手搭建一个属于自己的在线 IDE

    背景 这几个月在公司内做一个跨前端项目之间共享组件/区块的工程,主要思路就是在 Bit 的基础上进行开发.Bit 主要目的是实现不同项目 共享 与 同步 组件/区块,大致思路如下: 在 A 项目中通过 ...

  7. day17 Pyhton学习 内置函数继续

    1. locals 本地作用域/局部作用域  会随着位置的改变而改变 2.globals 全局作用域   永远不变,永远是全局 3.complex:复数 实数(有理数和无理数) 某一个数的平方是-1 ...

  8. CentOS 7系统常见快捷键操作方式

    快捷键操作方式 Linux系统中一些常见的快捷方式,可有效提高操作效率,在某些时刻也能避免操作失误带来的问题. 最有用的快捷键 序号 快捷键 官方说明 掌握程度 01 Tab 命令或路径等的补全键 移 ...

  9. 扫描仪扫描文件处理-Photoshop批处理无响应问题

    问题描述:Photoshop批处理时候卡死.卡住.无响应问题(出现在处理60M及以上TIFF文件的时候) 解决办法: 调整系统虚拟内存见<扫描-Photoshop批处理内存不足问题解决> ...

  10. Dubbo系列之 （七）网络层那些事（2）

    辅助链接 Dubbo系列之 (一)SPI扩展 Dubbo系列之 (二)Registry注册中心-注册(1) Dubbo系列之 (三)Registry注册中心-注册(2) Dubbo系列之 (四)服务订 ...