前端练手项目1-css线性渐变生成器

css线性渐变生成

项目效果

项目涉及内容

颜色色值

• 计算机三原色（red,green,blue）
  • color的值可以直接书写颜色的英文单词，如red，yellow，aqua等；
  • color=rgb(255,255,255) 【rgb(red,green,blue)】使用数字取颜色值，让我们能够使用的颜色更加丰富；
  • color = #000000； 十六进制表示法也是css样式中，颜色常用取值；
• 线性渐变
  • background: linear-gradient(45deg, #000000, #000000);【渐变角度，开始渐变颜色，… ，结束渐变颜色】渐变当中可以多个颜色。

生成十六进制的颜色

        function randomColor() {
            var aray = []
            var str = "#";
            var str1 = "#";
            var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
            for (var i = 0; i < 6; i++) {
                var num = parseInt(Math.random() * 16);
                var num1 = parseInt(Math.random() * 16);
                str += arr[num]
                str1 += arr[num1]
            }
            aray = [str, str1];
            return aray;
        }

先根据十六进制的的样式定义出一个包含0-F的数组（arr），随后利用math.random随机数生成函数生成0-15之间的数作为下标去取出arr当中的数，循环六次，拼接成为字符串便可得到随机生成的颜色色值。

进行dom操作

css样式操作
获取到背景的style，并通过获得到的随机数色值重新写入到css中渲染页面。

• 获取背景style

    

        

            
background: linear-gradient(45deg, #000000, #000000 );
            

                Generate
                Copy
            
        
    

// js部分，需要运行在
// 获取到背景上style
var obj = document.getElementById("bg")
//获取线性渐变的开始值和结束值
 var color1 = document.getElementById("color1")
 var color2 = document.getElementById("color2")
 

• 页面文字需要根据色值进行改变

color1.innerHTML = colorNum[0];
color2.innerHTML = colorNum[1];

• 改变背景色属性值

var str = 'background: linear-gradient(45deg,' + colorNum[0] + ',' + colorNum[1] + ');'
obj.style.cssText = str

利用style.cssText批量写入css样式，不过需要注意cssText会先将前面设置的样式抹去，再写入新的样式，这样会导致原有的样式失效，使用时请谨慎。
绑定点击函数

• 颜色变换按钮的点击事件

        //给Generate绑定点击事件 
        change.onclick = function () {
            var color1 = document.getElementById("color1")
            var color2 = document.getElementById("color2")
            var colorNum = randomColor()
            color1.innerHTML = colorNum[0];
            color2.innerHTML = colorNum[1];
            // console.log(colorNum);
            var str = 'background: linear-gradient(45deg,' + colorNum[0] + ',' + colorNum[1] + ');'
            obj.style.cssText = str
            return str
        }

• 给copy按钮绑定点击事件

 // 给copy绑定点击事件
    copytxt.onclick = function(){
       navigator.clipboard.writeText(copytext)
    }

这里直接使用 navigator.clipboard将文本内容写入到系统剪切板上，实现点击便可以复制的效果。但是写入剪切板是一种比较危险的行为，很多系统为了安全考虑会禁止浏览器的这种行为。