JavaScript生成随机颜色简单方法

本文主要和大家介绍javascript实现简单生成随机颜色的方法,涉及javascript随机数与字符串运算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下,希望能帮助到大家。

如果要做出如下效果,每次刷新网页则产生一种颜色

JavaScript生成随机颜色简单方法

其实非常简单,产生随机颜色的根本核心就是随机构造出一个六位数,JavaScript的随机数的问题

而且这个六位数的每一个数位0~f之内,因此就有了如下的方法:

立即学习“Java免费学习笔记(深入)”;

1、首先是一个HTML布局,p标签是是用来放当前颜色的,p的背景颜色就是这个颜色

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">          randomColor        

    

  

登录后复制

2、之后是核心的脚本:

  //颜色字符串  var colorStr="";  //字符串的每一字符的范围  var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];  //产生一个六位的字符串  for(var i=0;i<6;i++){    //15是范围上限,0是范围下限,两个函数保证产生出来的随机数是整数    colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];  }  document.getElementById("colorStr").innerHTML="颜色为:#"+colorStr;  document.getElementById("p1").style.backgroundColor="#"+colorStr;

登录后复制

相关推荐:

php简单生成随机颜色的方法

获得随机颜色的php代码

一个获取随机颜色生成在区域

以上就是JavaScript生成随机颜色简单方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787153.html

(0)
上一篇 2025年3月8日 18:03:46
下一篇 2025年2月26日 15:46:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript单击网页任意位置打开新窗口与关闭窗口的实现代码

    在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口。本文主要和大家介绍javascript实现单击网页任意位置打开新窗口与关闭窗口的方法,涉及javascript窗口的相关操作…

    2025年3月8日
    200
  • AngularJS的$timeout使用代码详解

    本文主要和大家介绍angularjs 的$timeout服务示例代码,需要的朋友可以参考下,希望能帮助到大家。  nbsp;html>var app=angular.module(“myApp”,[]);app.controller(…

    编程技术 2025年3月8日
    200
  • JS路由跳转的简单方法

    js路由跳转功能有很多方法可以实现,本文主要和大家分享一个简单的js路由跳转功能,非常不错,需要的朋友参考下吧。希望能帮助到大家。 下面的连接中有复杂的路由跳转 Title CHINACHINA1CHINA2CHINA311111 var …

    编程技术 2025年3月8日
    200
  • 实现简单标签点击切换功能的JS代码分享

    本文主要和大家介绍js实现的简单标签点击切换功能,涉及javascript事件响应及页面元素遍历、属性动态变换等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家 具体代码如下: nbsp;html>    www.php.cn  …

    编程技术 2025年3月8日
    200
  • JavaScript实现99乘法表代码

    本文主要和大家介绍使用javascript实现一个小程序之99乘法表的相关资料,需要的朋友可以参考下,希望能帮助到大家。 nbsp;html>   99乘法表     for (var i = 1; i <= 9; i++) {…

    2025年3月8日
    200
  • angularjs简单购物车功能实现方法

    本文主要和大家大家分享angularjs实现简单的购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 nbsp;html>    Title   *{ margin: 0; padding: 0; mar…

    编程技术 2025年3月8日
    200
  • JS前端缓存的实现方法及 Cookie的特点介绍

    在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了。对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极大地减少对服务器的访问。这种方法特别适用…

    编程技术 2025年3月8日
    200
  • JS正则实现密码强度验证功能

    本文主要和大家介绍js基于正则表达式实现的密码强度验证功能,涉及javascript事件响应及基于正则的字符遍历、判断等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 具体代码如下: nbsp;html>    www.jb5…

    编程技术 2025年3月8日
    200
  • JavaScript中new操作符详解

    javascript里实例化一个对象的时候,我们常用的方法就是使用new操作符。  本文主要和大家分享javascript中new操作符详解,希望能帮助到大家。 var Foo = function(x, y) { this.x = x t…

    编程技术 2025年3月8日
    200
  • JavaScript闭包详细介绍

    本文主要和大家详细介绍javascript闭包,说起闭包,相信写前端的同学都知道,而且相信在实际的项目中或多或少都已经用到了闭包。那到底什么才是闭包,闭包又是怎么产生的呢? 1. 什么是闭包在阮老师的文章中提到: 闭包就是能够读取其他函数内…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论