美化JS生成随机颜色

该代码应用到博客主题,展示地址:https://xzzz2020.gitee.io/tags/,如果有更好的优化思路,可以跟博主探讨探讨。

生成随机颜色代码比较多,但是想要美化这个随机算法有点难。

博主对此进行了一些相关测试,该测试结果因个人的审美会有较大的差距。

基本优化思路是

  • 如果固定一个颜色,再优化会更加简单,主要固定了一个是红色一个是蓝色(以绿为底,觉得很丑)
  • 剩下两个颜色不能过深或者过浅,所以进行了限定
  • 最后就是以红为底和以蓝为底的比例,就采用了经典黄金分割比
<script>
    function getColor1() {//固定红色值
        var re = "#";  
        var col = color();
        re += col + "FF";
        return re
    }
    function getColor2() {//固定蓝色值
        var re = "#FF";  
        var col = color();
        re += col;
        return re
    }

    function color(){
        var re = "";
        for (var xunhuan = 0; xunhuan < 2; xunhuan++) {
            var temp = Math.floor(256 * Math.random()) ;
            if(temp<130 && xunhuan==0){
                temp = 130;
            }
            if(temp>200 && xunhuan==1){
                temp =200;
            }
            temp = temp.toString(16);//将数值转换成16进制
            if (temp.length !== 2) {
                temp = "0" + temp
            }
            re += temp//对颜色进行拼接
        }
        return re;
    }
	var global_tags_random = 5//这个是博主标签的按钮数目,这样让每个标签都有不同的颜色
    for (xunhuan = 0; xunhuan <= global_tags_random; xunhuan++) {
        var temp = document.getElementById("tag-" + xunhuan.toString());
        var random = Math.random();
        if(random <0.618){//分配红色和蓝色出现的比例
            temp.style.backgroundColor = getColor1()
        }else{
            temp.style.backgroundColor = getColor2()
        }
        
    }
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我可以为您提供一些关于猜数字的游戏的示例代码,使用HTML、CSS和JavaScript编写。 首先,我们需要一个HTML页面来显示游戏。以下是一个简单的HTML页面,包括一个标题、一个输入框、一个按钮和一个用于显示游戏结果的区域: ```html <!DOCTYPE html> <html> <head> <title>猜数字游戏</title> <style> input { padding: 10px; font-size: 18px; margin-right: 10px; } button { padding: 10px; font-size: 18px; } #result { margin-top: 20px; font-size: 18px; font-weight: bold; } </style> </head> <body> <h1>猜数字游戏</h1> <p>请输入一个数字(1-100):</p> <input type="text" id="guess" /> <button id="submit">提交</button> <div id="result"></div> <script src="game.js"></script> </body> </html> ``` 接下来,我们需要编写JavaScript代码来实现游戏逻辑。以下是一个简单的示例,使用了Math.random()函数生成一个随机数,并将用户的猜测与该数字进行比较: ```javascript var randomNumber = Math.floor(Math.random() * 100) + 1; var guessInput = document.getElementById("guess"); var submitButton = document.getElementById("submit"); var resultDiv = document.getElementById("result"); submitButton.addEventListener("click", function() { var userGuess = parseInt(guessInput.value); if (userGuess === randomNumber) { resultDiv.innerText = "恭喜你猜对了!"; } else if (userGuess > randomNumber) { resultDiv.innerText = "你猜的数字太大了!"; } else { resultDiv.innerText = "你猜的数字太小了!"; } }); ``` 最后,我们需要一些CSS样式来美化页面。以下是一些简单的样式,使页面看起来更好看: ```css body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; margin-bottom: 50px; } p { font-size: 18px; margin-top: 20px; margin-bottom: 10px; } ``` 这就是一个简单的猜数字游戏示例,使用HTML、CSS和JavaScript编写。您可以根据需要进行修改和改进,以使其更适合您的需求。 ### 回答2: 猜一猜游戏是一款基于HTML、CSS和JavaScript开发的小型互动游戏。玩家通过猜测正确的答案来获取积分或解锁新的关卡。 在HTML中,我们可以创建游戏界面,包括游戏标题、题目、选项和用于显示分数和进度的容器。利用CSS,我们可以为游戏界面添加样式和布局,如背景色、字体样式以及按钮和文本框的样式。同时,我们还可以使用CSS动画来增强游戏的视觉效果和用户体验。 在JavaScript中,我们可以处理用户的输入和游戏逻辑。我们可以为答案设置变量,通过比较玩家的答案来判断是否正确,并在界面上显示相应的结果。另外,我们还可以使用JavaScript生成随机问题或答案,实现游戏的关卡升级或难度增加。 除了基本的逻辑处理,我们还可以利用JavaScript的其他功能来增强游戏体验。例如,实现计时器限制时间、添加提示功能、设置游戏音效等等。 总结来说,利用HTML、CSS和JavaScript可以创建一个简单而有趣的猜一猜游戏。通过适当地运用这些技术,我们可以开发出丰富多样的游戏界面和交互效果,为用户提供一种互动和娱乐的体验。 ### 回答3: 猜一猜游戏可以在网页上实现,使用HTML、CSS和JavaScript三种技术配合进行开发。下面我将简单介绍一下这个游戏的实现过程。 首先,我们可以使用HTML来构建页面的基本结构,包括题目的显示区域和用户输入的输入框。可以使用一个`<h1>`标签来显示题目,例如"猜一猜我心中的数字是多少?",同时添加一个`<input>`标签作为用户输入答案的框。 接下来,使用CSS来美化页面的样式。可以设置标题的字体样式、大小和颜色,以及输入框的样式,让页面看起来更加美观。 然后,使用JavaScript来实现游戏的逻辑。可以使用`Math.random()`函数生成一个随机数作为正确答案,将该答案存储在一个变量中。然后使用`document.querySelector()`函数获取到用户输入的答案,并将其存储在另一个变量中。接着,使用条件语句判断用户输入的答案与正确答案是否一致。如果一致,则弹出一个提示框告诉用户答对了,并提供重新开始游戏的选项。如果不一致,则告诉用户答错了,并提供再试一次的选项。 最后,添加事件监听器,当用户点击重新开始游戏的选项时,可以清空输入框的内容,生成一个新的随机数作为新的答案,并重新开始游戏。这样用户就可以不断地猜数字,直到猜对为止。 总结一下,通过使用HTML来构建页面结构,CSS来美化页面样式,JavaScript来处理游戏逻辑,我们可以实现一个简单的猜一猜游戏。用户可以在网页上输入答案,通过判断与正确答案是否一致来获取游戏结果。游戏具有简单的重置功能,用户可以重新开始游戏,不断猜数字,直到猜对为止。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值