JS 实现body背景颜色切换

2023-11-16

使用JS点击按钮,实现背景颜色的切换,效果如下
在这里插入图片描述
代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>点击按钮切换背景色</title>
</head>

<body id='btn_body' style="background-color:white;">
    <button id="btn">点击更换BODY皮肤(白-》红-》绿-》蓝-》黑-》白...</button>
</body>
<script>
    let btn = document.getElementById('btn');
    // 获取body,可以直接通过document.body
    let btn_body = document.body;
    //let btn_body = document.getElementById('btn_body');
    let i = 0;
    // 定义数组,数组内放颜色值,可以是英文,可以是十六进制,也可以是rgb格式。
    bgcArr = ['white', 'red', 'green', 'blue', 'black', '#999', 'rgb(167, 109, 109)'];
    btn.onclick = function() {
        i++;
        // 循环背景色
        i > bgcArr.length - 1 ? i = 0 : null;
        btn_body.style.backgroundColor = bgcArr[i];
    }
</script>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS 实现body背景颜色切换 的相关文章

  • Azure Functions [JavaScript / Node.js] - HTTP 调用,良好实践

    从我的 Azure 函数 在 Node js 中运行 由 EventHub 消息触发 中 我想向某个外部页面发出发布请求 就像是 module exports function context eventHubMessages var ht
  • 将客户端生成的响应作为下载进行流式传输,无需 Service Worker

    假设我有一个在客户端生成的大文件 我希望允许用户将其保存到他们的硬盘驱动器上 通常的方法是创建一个 Blob 然后为其创建一个对象 URL const blob new Blob chunks type application exampl
  • 将按键和焦点事件附加到 contenteditable div 内的元素

    我想附上keypress and focusoutcontenteditable 内段落的事件处理程序div 下面的代码似乎不起作用 div p Test p p Test p p Test p div p1 bind keypress f
  • 在 Javascript 中,有什么方法可以知道从哪个主机脚本加载?

    在javascript中 作为从某个主机加载的脚本 有什么方法可以知道我是从哪个服务器 主机加载的 我需要向该主机发出额外的 ajax 请求 并且更愿意动态地找出主机 因此 如果您在页面上包含 javascript 文件 当该 javasc
  • 当名称是数组时如何使用 Javascript 修改 HTML Select

    我有两个同名的 html select 对象 它们是具有不同索引的数组 我想做的是 如果从类别 0 选择元素中选择 关闭 我想禁用类别 1 元素 我一直在尝试使用 document getElementsByName 但无法弄清楚如何专门针
  • moment.calendar() 没有时间

    我想使用不带时间的 moment calendar 选项 所以而不是 上周二下午 5 点 我想要 上周二 有人知道 Moment 现在是否有解决方案吗 我找到了这个小提琴http jsfiddle net nawxZ http jsfidd
  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • 使用javascript在谷歌地图中绘制多边形

    我想在谷歌地图中绘制多边形 我正在使用示例代码http jsfiddle net rvsMH 1 http jsfiddle net rvsMH 1 但它不起作用并且没有获取数组或纬度 经度值 我不知道出了什么问题
  • 使用什么事件来在选择文本框中的值时显示警报消息

    我正在使用 jquery 的自动完成 api 来从数据库中获取名称 但是我想在从显示的文本框中选择名称时显示一条警报消息 我将显示一个图像以便更好地理解 当我输入 S 时 它将显示所有包含 S 的记录 所以问题是 如果我选择例如 Spars
  • Javascript:如何根据 html 标签扩展用户选择?

    乐代码 http jsfiddle net frf7w 12 http jsfiddle net frf7w 12 所以现在 当前的方法将完全按照 选择的方式获取所选文本 并添加标签 以便在显示时页面不会爆炸 但我想做的是 就是说 当用户选
  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • 无法读取setInterval(Hooks)中的最新状态变量[重复]

    这个问题在这里已经有答案了 我想这是因为 JS 的工作原理 但我想你不会在类中遇到这个问题 在此代码中 let open setOpen React useState false let counter setCounter React u
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • 两个日期之间间隔 15 分钟 javascript

    问题 我需要将两个日期 时间戳之间的所有 15 分钟时隙 日期格式 2016 08 10 16 00 00 创建为 HH mm 格式的数组 其中分钟限制为 00 15 30 45 示例 中午 12 30 到下午 2 30 将 gt 12 3
  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh
  • 在部分渲染时执行 JavaScript

    我有一些 JavaScript 代码 我想在用户单击其文件夹之一后执行 它会触发 show 操作和 show js erb 从而呈 现部分内容 Show js erb 当用户单击其文件夹之一时触发 如下所示 body append 它成功注
  • 如何在 JavaScript 中从代理对构造 UTF-16 字符?

    以下计算 Unicode 代码点的 UTF 16 代理对 戴着医用口罩的脸 https emojipedia org face with medical mask 但是如何从代理对构造字符以在字符串中使用呢 const codepoint
  • 使用 Javascript 检测 Pepper (PPAPI) Flash

    我们使用的是专有的文档查看器 它与某些 Chrome 版本中的 Pepper 版本的 Flash 配合得不太好 所以我希望能够检测到它并重定向到不同格式的相同内容 由于这个版本似乎落后于 NPAPI 版本 所以我一直在使用闪光检测 http
  • 将日期参数传递给对 MVC 操作的 ajax 调用的安全方法

    我有一个 MVC 操作 它的参数之一是DateTime如果我通过 17 07 2012 它会抛出一个异常 指出参数为空但不能有空值 但如果我通过01 07 2012它被解析为Jan 07 2012 我将日期传递给 ajax 调用DD MM

随机推荐

  • 基于数据驱动的电动车电池数据分析(一)

    基于数据驱动的电动车电池数据分析 一 欢迎关注笔者的微信公众号 笔者过去一年多的时间都在国内一家头部新能源企业实习 主要参与一些数据分析和平台研发的工作 在工作中积累了一些数据分析的经验 其中新能源领域比较多的是一些化工生产 智能制造方面的
  • CMAKE——set()函数及常用变量名

    set 将一个 CMAKE 变量设置为给定值 set
  • PAT乙级 1029旧键盘 python

    题目 思路 将输入与输出逐位对比 将不相等的记录下来即可 代码 input input print input bad key 记录坏掉的键盘 upper 将所有小写字符转为大写 lower 将所有大写转为小写 print position
  • wait notify正确使用方式

    wait notify正确使用方式 假设 当线程 Thread03 在1 100中找出77并输出后 Thread01 输出所有1 100中的奇数 当线程 Thread03 在1 100中找出88并输出后 Thread02 输出所有1 100
  • 使用expect实现scp远程复制文件

    expect安装 yum install y expect expect基本命令了解 spawn 交互程序开始后面跟命令或者指定程序 expect 获取匹配信息匹配成功则执行expect后面的程序动作 send exp send 用于发送指
  • 水仙花数的求解

    话不多说 直接给各位上小菜 package com znzz JavaTest public class FlowerTest 思路 水仙花数 指一个 n gt 3 n位正整数 其每位的数值的n次方之和等于本身 例如 153 1 3 5 3
  • 如何治理 Electron 版本淘宝直播应用崩溃?

    经过几个月的努力 基于Electron框架开发的新版淘宝直播推流软件终于上线了 随之而来的就是线上用户反馈的各种问题 其中最影响用户体验的当属应用崩溃问题了 当应用程序出现未 catch 的异常时就会发生崩溃 本文介绍了客户端应用崩溃的处理
  • UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xd7 in position 2: invalid continuation byte问题

    报错提示如下 self disease wds i strip for i in open self disease path encoding UTF 8 if i strip File C Users luckyli anaconda3
  • 嵌入式学习笔记---VIM常用操作和命令

    嵌入式学习笔记 VIM常用操作和命令 写在前面 这里我使用的开发环境是Windows下的Cygwin软件 如果不想下载虚拟机什么的 用这个日常开发完全够 具体的下载安装教程网上一大把 可以参考其他博主 一些配置文件 1 定义 Cygwin是
  • Oracle 进程结构

    Oracle进程结构 进程是动态创建的 完成任务后就消亡 而程序是静态的实体 程序是可以复制 编辑的 进程强调的是执行过程 而程序仅仅是指令的有序集合 进程在内存中 程序在外存中 ORACLE分为用户进程和ORACLE进程 l 用户进程 当
  • 可以解释一下什么是补码吗?

    补码是一种用来表示二进制数的方法 也是计算机中常用的数值表示方式之一 在补码中 正数的二进制表示与原码相同 而负数的二进制表示则是将对应正数的二进制表示按位取反后加上1 例如 在8位补码中 3的二进制表示为11111101 对应的正数是00
  • 输入3个整数,按从小到大的顺序输出

    include
  • mysql每秒最多能插入多少条数据 ? 死磕性能压测

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 前段时间搞优化 最后瓶颈发现都在数据库单点上 问DBA 给我的写入答案是在1W 机械硬盘 左右 联想起前几天infoQ上一篇文章说他们最好的硬件写入速度在2W后也无法提高
  • MobileNet V3 网络结构的原理与 Tensorflow2.0 实现

    文章目录 介绍 MobileNet V3 的创新 1 SE模块的加入 2 修改尾部结构 3 修改通道数量 4 改变激活函数 SE 模块中 BottleNeck 模块中 MobileNet V3 网络结构 1 MobileNet V3 Lar
  • transformer包中的bert预训练模型的调用详解

    文章目录 Bert调用 安装transformers BertTokenizer BertModel Bert调用 2018年的10月11日 Google发布的论文 Pre training of Deep Bidirectional Tr
  • JS获取URL中的Query参数

    需求描述 获取 URL 中的 Query 参数 例如 https www example com test html a param1 b param2 代码片段 实现一 使用URLSearchParams对象 兼容性见Can I use
  • ov5640 PLL时钟、图像大小、帧率寄存器配置

    不同像素和时钟的ov5640摄像头寄存器配置方法 配置摄像头寄存器 网上没有明说的 参考正点原子的文档进行介绍 像素大小配置 0x3801 0x3807 设置ISP大小 0 0 2631 1951 0x3808 0x380B 设置输出图像大
  • 经验分享-前端与后端的接口、HTML分离

    在WEB项目中 前后端不分离多人开放效率还不及一个人开发效率来的高 今天分享一个概念 后端写一个同一个的接口 此接口用于前端根据自己放在服务器上的文件地址生成 但访问处此地址的时候加载相关的一个总的JS用于加载其他的JS CSS HTML文
  • 计算机中丢失msvcp140.dll无法启动此程序怎么办(修复教程)

    DLL是Dynamic Link Library的缩写 意为动态链接库 dll文件是电脑系统及软件运行的重要文件 电脑如果丢失dll文件 那么很多软件跟游戏都是无法运行的 msvcp140 dll丢失这个问题就有很多小伙伴遇到 小编今天就分
  • JS 实现body背景颜色切换

    使用JS点击按钮 实现背景颜色的切换 效果如下 代码实现