代码：

<!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. js阻碍DOM加载

    今天用谷歌做了个小测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. ios6--UILabel

    // // ViewController.m // 02-UILabel的使用 // // UILabel显示一段文字. #import "ViewController.h" @i ...

  3. [BZOJ 1698] 荷叶池塘

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1698 [算法] 最短路 [代码] #include<bits/stdc++.h ...

  4. JSP-Runoob：JSP 语法

    ylbtech-JSP-Runoob:JSP 语法 1.返回顶部 1. JSP 语法 本小节将会简单地介绍一下JSP开发中的基础语法. 脚本程序 脚本程序可以包含任意量的Java语句.变量.方法或表达 ...

  5. Java I/O 的工作机制浅析

    I/O 问题可以说是当今互联网 Web 应用中所面临的主要问题之一,因为当前在这个海量数据时代,数据在网络中随处流动.这个流动的过程中都涉及到 I/O 问题,可以说大部分 Web 应用系统的瓶颈都是 ...

  6. PCB 加投率计算实现基本原理--K最近邻算法（KNN）

    PCB行业中,客户订购5000pcs,在投料时不会直接投5000pcs,因为实际在生产过程不可避免的造成PCB报废, 所以在生产前需计划多投一定比例的板板, 例:订单 量是5000pcs,加投3%,那 ...

  7. git配置用户信息

    git配置用户信息 一.在本地配置用户信息 配置内容:user.name 和 user.email 配置目的:Git用来记录谁做了什么事 配置方法:windows下打开Git Bash进行操作  gi ...

  8. sql 查询出当天记录数据

    select updatetime,NewComment,HistoryID,sum(1) over(partition by UpdateTime) from LPProjectHistoryord ...

  9. 题解报告：hdu 2647 Reward（拓扑排序）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2647 Problem Description Dandelion's uncle is a boss ...

  10. Java&Xml教程（五）使用SAX方式解析XML文件

    Java SAX解析机制为我们提供了一系列的API来处理XML文件,SAX解析和DOM解析方式不太一样,它并不是將XML文件内容一次性全部加载,而是连续的部分加载. javax.xml.parsers ...