在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. 西安交通大学c++[mooc]课后题12章(只有后两题)

    不是从第一题开始的,因为我刚准备把代码粘到CSDN上面,可以给自己看,也有可能启发后来者. 机会是留给有准备的人的      --路易斯·巴斯德 先写下第12周慕课学习总结吧! 多态就是将运算符重载, ...

  2. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)解决方案

    在Win7下使用MySQL5.6.35创建用户时,提示权限不足,具体解决方案如下: 1 停止mysql服务 net stop mysql 2 打开新的cmd窗口,切换到bin目录,运行如下命令,cmd ...

  3. 多测师讲解自动化测试 _RF关键字001_（上）_高级讲师肖sir

    讲解案例1: Open Browser http://www.baidu.com gc #打开浏览器 Maximize Browser Window #窗口最大化 sleep 2 #线程等待2秒 In ...

  4. 多测师讲解python _函数return_高级讲师肖sir

    # 函数中的返回的作用: 注意点:(1)调用函数===没有加print 调用函数为空,加了print调用函数打印输出none              (2)在函数中碰到return语句赋值直接返回r ...

  5. 多测师讲解python __for 循环___高级讲师肖sir

    横向输出 1.遍历字符串 2.遍历列表 3.遍历元组 方法一: 方法二: 方法三: #循环字典:方法一# dict1={"name":"zhihao",&quo ...

  6. Flask实现群聊

    后端 from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer from ge ...

  7. 如果你想or即将成为一名程序员，那你需要知道这些东西！上岗须知~

    前两天公司学院的同学给我看了一下即将入职的应届生的数量,真是不少.感慨一下,一批新人即将到来,而自己又老去了一岁.码农是一个必将终身学习的职业.而相关的知识越来越多了.接下来该学什么?接下来该干什么? ...

  8. 全文检索Solr集成HanLP中文分词【转】

    以前发布过HanLP的Lucene插件,后来很多人跟我说其实Solr更流行(反正我是觉得既然Solr是Lucene的子项目,那么稍微改改配置就能支持Solr),于是就抽空做了个Solr插件出来,开源在 ...

  9. Spring 事件监听

    Spring 的核心是 ApplicationContext,它负责管理 Bean的完整生命周期:当加载 Bean 时,ApplicationContext 发布某些类型的事件:例如,当上下文启动时, ...

  10. 一起学Vue：访问API(axios)

    目标 使用Vue+ElementUI+axios构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 什么是 axios? Axios 是一个基于 promise 的 HTTP 库,可以用 ...