简短代码实现浏览器背景随机变色

动态颜色输入框：实时背景转换与16进制显示
最新推荐文章于 2025-08-29 15:00:19 发布
原创 最新推荐文章于 2025-08-29 15:00:19 发布 · 680 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #css3 #html5

本文介绍如何使用JavaScript实现一个功能，创建一个输入框配合随机颜色函数，点击按钮时输入框显示所选16进制颜色，并实时改变body背景色。涉及前端交互和颜色处理技巧。

1、首先我们在body里面写一个输入框和按钮

2、编写随机颜色的函数（利用数组+随机函数的方法）

3、当点击按钮的时候，输入框显示16进制颜色，body背景颜色随之变化。

 

老是写Bug
关注
效果:网页页面随机改变颜色+自定义样式背景颜色随机改变+20秒倒计时+时间一到马上跳转新页面
weixin_45789271的博客
10-30 1253
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
自己做的每三秒随机改变背景色.html
01-06
自己做的每三秒随机改变背景色.html
JS代码实现根据时间变换页面背景效果
11-25
1.概述 有些时侯为了丰富页面的显示效果，将页面制作成根据时间变换页面背景的样式，这样会使浏览者对此网站不会感觉厌倦，同时也会觉得网站制作的非常新颖。本实例通过Date对象的getHours()方法获得当前系统时间的小时，然后根据不同的时间段来改变页面的背景图片。 2.技术要点 主要使用JavaScript中的Date对象的getHours()方法得到当前系统时间的小时，然后在一定的时间段内判断当前小时是否符合指定的时间段，如果符合则使用document对象的write()方法在页面中显示一幅图片并在图片下方输出指定的提示信息。 3.具体实现 （1）使用now.getHours()函
编写程序，如下所示。要求每单击一次按钮，窗口的背景颜色就随机改变一次。（颜色通过Color类自定义颜色值随机产生）
weixin_45634936的博客
04-29 3636
编写程序，如下所示。要求每单击一次按钮，窗口的背景颜色就随机改变一次。（颜色通过Color类自定义颜色值随机产生） 仅供学习 package day01; import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.util.Random; public class Text5 { publ...
根据时间变换页面背景
weixin_30493401的博客
06-15 815
1.概述 有些时侯为了丰富页面的显示效果，将页面制作成根据时间变换页面背景的样式，这样会使浏览者对此网站不会感觉厌倦，同时也会觉得网站制作的非常新颖。本实例通过Date对象的getHours()方法获得当前系统时间的小时，然后根据不同的时间段来改变页面的背景图片。 2.技术要点 主要使用JavaScript中的Date对象的getHours()方法得到当前系统时间的小时...
深入探索 Android 包体积优化（匠心制作）
IT元老的博客
03-26 5887
前言 成为一名优秀的Android开发，需要一份完备的 知识体系，在这里，让我们一起成长为自己所想的那样~。 在 Android 性能优化的知识体系当中，包体积优化一直被排在优先级比较低的位置，从而导致很多开发同学对自身应用的大小并不重视。在项目发展的历程中，一般可划分为如下三个阶段： 初创期 => 成长期 => 成熟期 通常来说，当应用处于成长期的中后阶段时，才会考虑去做系统的包体......
原js笔记
Pwsifeng的博客
01-10 3001
s原生JS笔记 电话：17339853876（微信同号） 二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作 人机交互 前后端交互 3、HTML、CSS、JS的作用和关系 一个网页由三部分组成：HTML、CSS、Javascript HTML： 结构（静态） [外链图片转存失败,源站可能有防盗链
5、探索 Copilot：功能、设置与隐私管理全解析
最新发布
n8m7b6v5c4的博客
08-29 103
本文全面解析了 Copilot 的功能、设置与隐私管理，包括侧边栏操作、聊天与撰写模式切换、插件使用流程以及隐私保护设置等内容。通过详细的介绍和使用建议，帮助用户更好地利用 Copilot 提升工作效率并保护个人信息安全。
2万字软件测试面试题干货带答案，反手我就一个收藏
m0_57290404的博客
06-14 2032
需求分析、编写测试用例、评审测试用例、搭建环境、等待程序开发包、部署程序开发包、冒烟测试、执行具体的测试用例细节、Bug 跟踪处理回归测试、N 轮之后满足需求，测试结束第一类标准：测试超过了预定时间，则停止测试。第二类标准：执行了所有的测试用例，但并没有发现故障，则停止测试。第三类标准：使用特定的测试用例设计方案作为判断测试停止的基础第四类标准：正面指出停止测试的具体要求，即停止测试的标准可定义为查出某一预订数目的故障。第五类标准：根据单位时间内查出故障的数量决定是否停止测试1) 应当把“尽早地和不断地进行
完美随机更换变化网页背景图，随机修改，js特效代码
12-25
完美随机更换变化网页背景图，随机修改，js特效代码
JS操作CSS随机改变网页背景实现思路
12-08
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然我的回答是可以的。具体可以这样做： 1、用JS定义一个图片数组，里面存放你想要随机展示的图片 代码如下: var imgArr=[“http://huoche.7234.cn/images/jb51/xai3pnacxy3.png”, “http://huoche.7234.cn/images/jb51/2uwzc324ykb.gif”, “http://huoche.7234.cn/images/jb51/yewrox1hkyq.jpg”, “http://huoche.7234.cn/images/
js实现网页随机切换背景图片的方法
10-25
主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下
【JavaScript】自动改变网页背景色
林多
10-28 2474
自动改变网页背景色 最近在做一个功能时，需要一个自动变换背景的网页，进行功能验证。于是就是写了一个自动变色（背景）的网页。下面是些用到的知识点，作为总结。 知识点1：定时器 setTimeout("func", ms) 知识点2：css style，这里设定了day和night两类。day对应白色背景，night对应黑色背景。 <style type="text/css"> ...
html自动更改背景颜色,javascript实现随时变化着的背景颜色
weixin_42364301的博客
05-31 1011
很简单的一段背景颜色时刻发生变化的代码Document#dv {width: 100px;height: 100px;}window.onload=function(){var oDv = document.getElementById('dv');oDv.style.backgroundColor='red'setInterval(function(){var arrRandNumber = [...
JS操作CSS随机改变网页背景
weixin_34414650的博客
03-11 212
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然我的回答是可以的。具体可以这样做： 1、用JS定义一个图片数组，里面存放你想要随机展示的图片 1 2 3 4 5 var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",   ...
背景色自动切换html,JavaScript实现网页背景自动变色
weixin_39905816的博客
07-01 2818
JavaScript实现网页背景自动变色，自己变换颜色，设定时间和颜色值即可，在你设定的颜色值、一定时间内自动切换网页背景颜色。/p>"http://www.w3.org/TR/html4/loose.dtd">背景自动变色背景自动变色var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","...
JavaScript实现背景颜色随时间变化
weixin_33963594的博客
07-27 7527
要求：网页的背景颜色随着时间的变化而变化。间隔为1s，即每一秒一个色值。 实现： 用window.onload加载函数(onload 事件会在页面或图像加载完成后立即发生。) 用随机数产生rgb数值 window.setTimeOut()设置间隔时间 ps: document.body.bgColor貌似不能用rgb()的形式赋值唉 放代码： &lt;!DOCTYPE html&gt; &lt...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值