代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background-color: #d58512;

        }

        .bgc-1{

            background-color: hotpink;

        }

    </style>

</head>

<body>

<div class="bgc-1"></div>

<script>

    let divEle = document.getElementsByTagName("div")[0];

    setInterval(function () {

        divEle.classList.remove("bgc-1");},2000);

    // 设置1秒后执行func函数（只调用一次）

    setTimeout(func,1000);

    function func() {

        setInterval(function () {

            divEle.classList.add("bgc-1")},2000)

    }

</script>

</body>

</html>

JS练习：定时器--背景颜色交替变换的更多相关文章

  1. 记录一个js切换随机背景颜色的代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. js切换实现背景颜色

    <script type="text/javascript"> obj=document.getElementsByTagName('h1'); ;i<obj.l ...

  3. css3动画之背景颜色的自动切换

    因为不同浏览器内核的不同所以会产生浏览器兼容性问题 <!DOCTYPE html> <html> <head> <meta charset='utf-8'/& ...

  4. Java POI 实现Excel相同数据同一颜色，不同数据颜色交替显示

    目录 1.效果图 2.具体代码实现 excel 读取工具类 excel写入和测试类 1.效果图 2.具体代码实现 excel 读取工具类 package utils; import java.io.F ...

  5. CSS 之动态变换背景颜色

    先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...

  6. 关于更改MYECLIPSE JS 代码背景颜色

    白色的背景,看花了眼,你想改一下编辑器的背景颜色,移步这里就可以了. 这时你高兴的打开编辑器,发现颜色确实变了,但是当你打开有JS的JSP时,你碉堡了,发现JS的背景颜色还是默认的, 看着让人纠结,好 ...

  7. js获取背景颜色

    //js获取背景颜色var Airport=$("#Airport").css('background-color'); js设置背景颜色 $("#intercity&q ...

  8. [ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色

    在ASP.NET中的gridview控件里面可以通过设定其OnRowDataBound事件来进行实现高亮当前行的操作 前端控件的设置: 只要设置好OnRowDataBound属性即可,会自动在.cs文 ...

  9. Flutter 实现“斑马纹”背景（需要变换颜色）

    Flutter 实现"斑马纹"背景 由于工作中项目需求,需要将H5转换为Flutter代码. 其中的斑马纹背景需要根据接口返回的颜色来渲染,所以不能只是图片形式,无法通过decor ...

随机推荐

  1. 5分钟Serverless实践 | 构建无服务器的敏感词过滤后端系统

    前言 在上一篇“5分钟Serverless实践”系列文章中,我们介绍了什么是Serverless,以及如何构建一个无服务器的图片鉴黄Web应用,本文将延续这个话题,以敏感词过滤为例,介绍如何构建一个无 ...

  2. mybatis Generator生成代码及使用方式（转载）

    转载自:http://www.cnblogs.com/fengzheng/p/5889312.html 文章很棒,很不错,转了.

  3. 【C++程序不输出】到底是什么造成了程序不输出

    (ubuntu 16.04) 最近做题的时候,经常莫名其妙地,程序写的明明没毛病但是就是输出不了,气得我呀 然后某一次突然发现了原因,竟然是输出之后没有加endl或者空格! 例如: cout<& ...

  4. basename与dirname命令解析【转】

    本文转载自:http://blog.csdn.net/choice_jj/article/details/8766335 basename命令 语法:basename string [suffix] ...

  5. influxdb入门——和mongodb一样可以动态增加字段

    ./influxd [--config yourconfigfile 2> /dev/null]  之所以重定向 因为默认log是stderr 再启动客户端./influx > CREAT ...

  6. HTML5浏览器嵌入窗口程序解决方案

    浏览器嵌入窗口程序一直以来就是WEB应用程序的首选方案,这种方案只需要实现一个主窗口,并提供一些接口供脚本调用,内部的界面和逻辑处理全部用html,css,javascript去实现.我最早看到的相关 ...

  7. P3178 [HAOI2015]树上操作 树链剖分

    这个题就是一道树链剖分的裸题,但是需要有一个魔性操作___编号数组需要开longlong!!!震惊!真的神奇. 题干: 题目描述 有一棵点数为 N 的树,以点 为根,且树点有边权.然后有 M 个操作, ...

  8. 洛谷 P4178 Tree —— 点分治

    题目:https://www.luogu.org/problemnew/show/P4178 这道题要把 dep( dis? ) 加入一个 tmp 数组里,排序,计算点对,复杂度很美: 没有写 sor ...

  9. MSP430 使用时 RST引脚一定拉高

    因为这次省去了RESET按键,RST没做任何处理,程序下载完之后插上电池无法运行,最终原因:RST引脚没有拉高.呼呼切记啊

  10. 学学cookie和session

    什么是Cookie? HTTP Cookie(也叫 Web Cookie或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器发起请求时被携带并发送到服 ...