利用JS随机生成颜色

html 复制代码
​
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div style='height:100px ; width:100px;background-color:"pink"  '></div>
  <!-- /* <div style="height: 100px;"></div> */ -->
  <script>
    alert(Math.floor('a'))
    // 换成Number形式,取整,取得都是原本类型的。${}去掉""
    let arr1={
      red:'red',
      yellow:'yellow',
      blue:'blue',
      black:'black',
      pink:'pink',
      a1:'rgba(1,2,3,0.8)'
    }
    //变量可以写在下面。()
    let arr=['red','yellow','green','blue','black','pink','a1']
    function Random(){
      return Math.floor(Math.random()*arr.length)
    }
    // arr1[arr[Random()]]
    
   let c=arr1[arr[6]]
   console.log(typeof c)
   
  
    document.write(`<div style='height:100px ; width:100px;background-color:${c} '></div>`)
  </script>
  <!-- 需要加; -->
</body>
</html>

​

我写的这个随机生成,其实最后生成的颜色,最后还是看自己写在数组内的颜色。并不能随机生成16进制/rgb任意的。这个随机颜色生成不写这个JSON对象都可以。写不写一样。以及我们在数组当中/对象当中最后取到的是数据类型整个字面值。1是NUmber数据类型,取到整个1,字符串String类型也是整个String。带""表述这个字面值。但是我们反引号取变量,对于字符串放进来会去引号。以及Math.floor这个是把里面的数会转成数字类型,里面有转成数字类型代码。然后再取整。

随机生成颜色,可以对这个#后面六个数随机取/rgb()内部三个数随机取。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    
    let arr=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
    if(flag=false){
    let r=Math.floor(Math.random()*256)
    let g=Math.floor(Math.random()*256)
    let b=Math.floor(Math.random()*256)
    document.write(`rgb(${r},${g},${b})`)
    }else{
      let new1='#'
      for(let i=0;i<6;i++){
// 对于#ffffff这种不能像上面这种只用随机数,随机数只是数字,但是这个十六进制有字母,所以只能用
// 数组。但是对于上面的,rgb()内部几个字母。我们知道document内输出的时候,反引号内,随便放,最后得到结果输出。
// 我们输出document.write输出把标签有css一定是字符串类型。引号内写这些颜色。反引号可以写这些变量。
        let c=Math.floor(Math.random()*arr.length)
        new1+=arr[c]
      }
      document.write(new1)
    }

  </script>
</body>
</html>

${}生成的会去字符最后在浏览器上的只有html和css,html不会有JS,但是如果遇到属性值没写双引号会自动加,给的html

相关推荐
阿方.91810 分钟前
《数据结构全解析:栈(数组实现)》
java·开发语言·数据结构
前端小巷子11 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia24 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.27 分钟前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Dovis(誓平步青云)36 分钟前
《探索C++11:现代语法的内存管理优化“性能指针”(下篇)》
开发语言·jvm·c++
Mintopia37 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie11451419144 分钟前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd1 小时前
3种XSS攻击简单案例
前端·xss
盖头盖1 小时前
【xss基本介绍】
前端·xss