代码：

<!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. WinMain和MFC的差别

    API(Application Programming Interface):开放给应用程序调用的系统功能. 一个Windows Application(SDK): WinMain ReristerC ...

  2. ios14--购物车优化2

    // // ViewController.m // 03-综合练习 // // Created by xiaomage on 15/12/28. // Copyright © 2015年 小码哥. A ...

  3. Android showDialog时报错requestFeature() must be called before adding content

    View view = View.inflate(this, R.layout.layout_dialog, null); AlertDialog alertDialog = new AlertDia ...

  4. 第一周 Leetcode 57. Insert Interval （HARD）

    Insert interval  题意简述:给定若干个数轴上的闭区间,保证互不重合且有序,要求插入一个新的区间,并返回新的区间集合,保证有序且互不重合. 只想到了一个线性的解法,所有区间端点,只要被其 ...

  5. 洛谷 p1625

    高精度 我以为这题必有高论,怎么想也想不出来,没想到竟是如此粗鄙做法. 我们写一个高精度模拟一下,然后枚举约数看是否能约分,由于我不会高精度除法,就抄了一发 其实这种两项之比和项数有关的数列是不能推通 ...

  6. hadoop-Combiner作用用法

    文章来源http://blog.csdn.net/ipolaris/article/details/8723782 reduce的输入每个key所对应的value将是一大串1,但处理的文本很多时,这一 ...

  7. what is success？

    什么是成功?这是个老话题了.然而每个人对成功的认识却也不同.记得央视主持人王志说过成功是相对的,每个人都有自己的成功标准.有的人认为有钱.有房.有车.有女人,就是成功.有的人则认为成功是你做了一件你想 ...

  8. [转]linux之磁盘配额（quota）

    转自:http://www.jb51.net/LINUXjishu/78446.html 磁盘配额(quota)比较常用的几个情况是: * 针对WWW server,例如:每个人的网页空间的容量限制 ...

  9. 入门开发工具idea常见问题之选项中没有servlet

    1.在maven中如果创建不了servlet,在project Setting旁边的添加一个web选项,就可以创建servlet了. 初次接触这个陌生的工具还是不太好弄.

  10. 深入理解async和await的作用及各种适用场景和用法

    https://www.cnblogs.com/yaopengfei/archive/2018/07/02/9249390.html https://www.cnblogs.com/xianyudot ...