前端——JS之随机更改背景颜色

最新推荐文章于 2023-05-17 11:38:12 发布
最新推荐文章于 2023-05-17 11:38:12 发布
阅读量974 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45675097/article/details/106389898
版权

难得听课（小声bb）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随机更改背景颜色</title>
	<script type="text/javascript">
		var table,color;
		function $(id){return document.getElementById(id);}
		function randomInt(){
			var rancor=Math.floor(Math.random()*256);
			return rancor;
		}
		function ChangeColor(){
			table=$("FirstTab");
			color=table.getAttribute("bgcolor");//保存原始值
			var r=randomInt().toString(16);///转化为16进制
			var g=randomInt().toString(16);
			var b=randomInt().toString(16);
			var rescolor="#"+r+g+b;
			table.setAttribute("bgcolor",rescolor);///把后者的值赋值给前者
		}
		function ResetColor(){
			///color="#179BD6";
			table.setAttribute("bgcolor",color);
		}
	</script>
</head>

<body>
	<form method="post" >
		<table align="center" border="1" bgcolor="#179BD6" width="500px" id="FirstTab">
			<tr>
				<caption>学生花名册</caption>
				<td>序号</td>
				<td>姓名</td>
				<td>学号</td>
				<td>专业</td>
			</tr>
			<tr>
				<td>1</td>
				<td>Cutele</td>
				<td>261</td>
				<td>软件工程</td>
			</tr>
			<tr>
				<td>2</td>
				<td>小乐乐</td>
				<td>20192203262</td>
				<td>网络工程</td>
			</tr>
			<tr>
				<td colspan="4">
					<input type="button" value="change color" onClick="ChangeColor()">
					<input type="button" value="reset color" onClick="ResetColor()">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
豆沙睡不醒
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js 实现随机切换背景
11-27
js 实现随机切换背景 实现随机切换背景
js设置随机切换背景图片
b305723的专栏
11-10 405
<script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png...
JS实现随机改变背景颜色
weixin_45609811的博客
10-03 4077
使用Js实现随便点击页面某位置就能改变页面背景颜色的功能 function changeBg(){ //改变背景颜色的函数 var bgColor=""; for(var i=0; i<6; i++){ bgColor += '' + Math.round(Math.random()*9); } document.body.style.backgroundColor...
js随机改变背景颜色
闷骚的男
08-15 2389
这个程序里面，最让我感觉不错的是：   var r,g,b;     r = decToHex(randomNumber(256)-1);     g = decToHex(randomNumber(256)-1);     b = decToHex(randomNumber(256)-1);     document.bgColor = "#" + r + g + b;  这段生成
利用原生js实现随机颜色画布
qq_61955502的博客
10-27 896
js随机颜色画笔
网页模板——JS实现随机密码生成器可控制密码复杂度.zip
11-23
网页模板——JS实现随机密码生成器可控制密码复杂度是一个基于JavaScript技术的实用工具，用于生成自定义复杂度的随机密码。这个模板提供了一个用户友好的界面，允许用户根据自己的安全需求选择密码的长度和复杂性，...
小程序源码 抽奖页面小程序前端模板
02-19
本主题聚焦于一个特定的小程序源码——抽奖页面小程序前端模板，这是一套用于构建抽奖活动页面的代码框架。下面我们将深入探讨相关知识点。 首先，我们要了解小程序的基本结构。小程序由JSON配置文件、WXML（微信小...
js——别踩白块
09-04
6. 错误提示：如果玩家踩到白块，JavaScript可以触发错误提示，如弹出警告框或者改变游戏背景颜色，提醒玩家游戏结束。 在压缩包中的"pages"文件夹，可能包含了游戏的HTML页面、CSS样式文件以及JavaScript源代码...
网页模板——经典FLASH+JS图片幻灯切换特效.zip
11-24
在“经典FLASH+JS图片幻灯切换特效”这个模板中，Flash和JavaScript的结合使用，既保留了Flash丰富的动画效果，又利用了JavaScript的灵活性和互动性。这种混合技术可以为用户提供更丰富、更个性化的视觉体验，同时在...
基于JS实现带表情图片可修改kindEditor编辑器特效源码.zip
11-10
【标题】"基于JS实现带表情图片可修改kindEditor编辑器特效源码"涉及的核心知识点是前端开发中的富文本编辑器实现，特别是如何利用JavaScript语言和特定库——KindEditor，来创建一个支持表情图片和自定义功能的编辑...
js实现点击按钮随机生成背景颜色
11-19
本文实例为大家分享了js实现点击按钮随机生成背景颜色的具体代码，供大家参考，具体内容如下 通过点击按钮更换整个页面的背景颜色 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width: 150px; height: 50px; b
html5随机背景颜色
weixin_33739541的博客
06-19 684
<script>var colors=['red','blue','green','orange','yellow']; function bcolor(){ var c=Math.floor(Math.random()*5); document.bgColor=colors[c]; }bcolor();</script> 转载于:h...
JavaScript写一个获取随机颜色的代码且避开(白 黑)两种颜色
weixin_45966674的博客
05-17 459
【代码】JavaScript写一个获取随机颜色的代码且避开(白 黑)两种颜色。
JS 生成随机背景色
Mystery_Fan的博客
06-01 974
JS 生成随机颜色 简单一句话: let color = '#' + Math.random().toString(16).substr(-6) span.style.backgroundColor = color 百度找的各种方法: 随机颜色 一. function ranColor() { var str = '0123456789abcdef'; var bgColor = '#'; for (var i =
随机改变背景颜色
j_and_c的博客
09-01 1923
刚开始学JavaScript不久，自己做了个有趣的东西，想跟大家分享一下。我做的是一个十行十列的表格，当鼠标滑过时随机改变背景颜色，以下是我的代码：` 随机背景色表格 ...
vue 前端实现随机背景色
weixin_62897746的博客
12-11 3140
要求是页面对应的几个模块每次打开都要显示多个不同的随机颜色，点击刷新则显示的颜色改变。我就封装成了一个函数，有不足的地方，还希望多多指点。代码如下。 步骤： 1. 封装一个函数 2. 使用for循环，需要使用多少个背景色，就循环几次 3. 使用Math.floor()下舍入，把获取到的值进行取整 4. 使用Math.random()方法获取随机数 5. toString(16)转换为16进制 6. 点击刷新则重新调用封装的函数 7. 点击颜色块则把颜色赋值到input框中 8. 背景色页随之改变
操作元素之修改样式属性
leechoy
06-12 630
<!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-UA-Compatible" content="ie=edge"> <title>..
JS如何输出随机背景颜色
pipixian2的博客
10-11 2076
JS如何输出随即背景颜色 **原理：**通过random（）方法生成的随机数乘以256并取整，循环三次获得rgb（）三个值，然后进行封装，使其按照指定格式输出。 十六进制方法需调用 toString（16）方法，颜色属性值转换为十六进制，然后封装输出。 PS:将以下代码直接粘贴，即可运行。 <head> <meta charset="utf-8"> <title...
前端——JS写随机颜色
qq_41377400的博客
01-06 771
var cg = document.getElementById("cg");  //获取ID cg.onclick = function ox(){ var c = '#';    var cl; for(var i = 0;i {     cl = parseInt(Math.random()*16).toString(16);                  //parseI
前端随机生成背景颜色
最新发布
06-01
// 生成随机颜色 function getRandomColor() { var letters = "0123456789ABCDEF"; var color = "#"; for (var i = 0; i ; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆沙睡不醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值