代码：

<!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. Index statistics collected bug

    SQL运行引擎会从pg_stats.pg_class等相关系统字典表.视图获取生成最佳运行计划的数据,假设相关字典视图的数据不准确就没有办法生成良好的运行计划. 发现下面Bug一枚. 0. 插入数据之 ...

  2. HDU 5489 Difference of Clustering 图论

    Difference of Clustering Problem Description Given two clustering algorithms, the old and the new, y ...

  3. 【转】Android的WebView控件载入网页显示速度慢的究极解决方案

    秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国外很多网站,也看过PhoneGap的代码,一直无解. 一般人堆WebView的加速,都是建议先用webView.getSettings().setB ...

  4. PCB 720全景图嵌入登入界面应用实现

    通常软件主界面或登入界面背景图片通常采用固定图片,这里介绍如何将720度全景图嵌入到登入界面中来, 这里用的素材来源于这里上个月在公司里拍摄的全景图, 一.拍摄720度全景图片, 建议:最好用三角固定 ...

  5. 必会！Linux文件的管理

    1.1 创建一个目录 /data [root@liuhao ~]# mkdir /data 1.2 查看目录是否创建成功 <可以找到data即为创建成功> [root@liuhao ~]# ...

  6. ckeditor使用时，第一次可以显示，修改后显示不了的问题

    1.谷歌浏览器会留有缓存,除去缓存后,就可以更改ckeditor了.下面是解决方法:

  7. [Swift通天遁地]七、数据与安全-(4)CoreData数据的增、删、改、查

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. vue-router路由加载两种模式

    路由安装npm install --save vue-router 安装完成后,打开package.json,如果看到这个"vue-router": 版本号, 就代表安装成功了   ...

  9. 涨知识 - II

    计算机网络相关 1.在无盘工作站向服务器申请IP地址时,使用的是(     )协议. A.ARP B.RARP C.ICMP D.IGMP 解析: ARP(地址解析协议)是设备通过自己知道的IP地址来 ...

  10. 【转】Linux字符转换命令col

    转自:http://www.cnblogs.com/ningvsban/p/3725464.html [root@www ~]# col [-xb]选项与参数:-x :将 tab 键转换成对等的空格键 ...