代码：

<!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. 安装ubuntu远程桌面xrdp可视化设置界面

    ubuntu 远程桌面的时候须要从系统-首选项-远程桌面 可是有的ubuntu远程桌面的应用须要自己安装.例如以下是安装命令: sudo apt-get install xrdp

  2. LeetCode总结--二分查找篇

    二分查找算法尽管简单,但面试中也比較常见.经经常使用来在有序的数列查找某个特定的位置.在LeetCode用到此算法的主要题目有: Search Insert Position Search for a ...

  3. Codesys——TON和TOF的使用方法

    1. 引言 介绍延迟导通.延迟关闭函数的使用方法. 2. 函数描述 TON: 当IN为FALSE时,输出Q为FALSE: 当IN为由FALSE变为TRUE时,延迟导通过程中Q为FALSE,当时间到Q变 ...

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

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

  5. C#窗体间传值的简便方法/工具

    一.问题:窗体间传值必须需要窗体之间有联系,具体有如下方式 窗体间传值涉及到窗体A必须拥有窗体B,这样才可以实现A-B之间传值 窗体A与窗体B在窗体/实例C中,A-B可互相通讯 其他方式,不细讨论,复 ...

  6. thinkphp自带的验证码出现的问题

    thinkphp3.1.2版本中今天做验证码时出现了一个小问题. 在后台我引入过了一次验证也就是 import('ORG.Util.Image'); Image::buildImageVerify() ...

  7. [App Store Connect帮助]二、 添加、编辑和删除用户（2）查看并编辑您的个人帐户

    您可以在 App Store Connect 的“编辑个人资料”中查看和编辑个人信息.如果您的 Apple ID 与多个帐户相关联,您可以在您的用户帐户之间切换. 查看您的个人帐户 在任意 App S ...

  8. Visual Studio Code配置GitHub（Win7环境）

    一.软件环境说明(演示环境) 1.操作系统:Windows7旗舰版(64bit) 2.Visual Studio Code版本:1.32.3 3.Git版本:2.21.0.windows.1 二.软件 ...

  9. 记一次MySQL索引优化

    两张表是主(CHECK_DRAWINGS)从(CHECK_DRAWINGS_IMG)关系. CHECK_DRAWINGS,主表数据 3591条. SELECT COUNT(*) FROM CHECK_ ...

  10. $P5017 摆渡车$

    problem 毒瘤\(DP\) #ifdef Dubug #endif #include <bits/stdc++.h> using namespace std; typedef lon ...