个人中心
gpt4 book ai didi

javascript - 如何修改此脚本以使用不同的颜色？

转载 作者：太空宇宙 更新时间：2023-11-04 05:22:16 27 4
gpt4 key购买 nike

我有一个页面，它有一个 4x4 网格和两个正方形，一个白色，一个黑色。我需要知道如何修改脚本以使白色出现在黑色之前。

请有人帮我解决这个问题，代码贴在下面:

html:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen> 
<SCRIPT LANGUAGE="JavaScript" SRC="script1.js"> </SCRIPT> 
</head> 
<body>  
<div class="container">     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div id="square1id" class="box"></div>      
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div id="square2id" class="box spacing"></div>     
<div class="box"></div>      
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box"></div>      
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box"></div> </div>  
</body> 
</html>

CSS:

body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

.container{
    overflow:hidden;
    width:860px;
    margin-left:250px;
    margin-top:20px;
}
.box{
    width:210px;
    height:120px;
    float:left;
    background-color:#4D4D4D;
    margin-bottom:3px;
}

.spacing{
    margin-right:3px;
}

JavaScript:

$(document).ready(function(){

var colourinfo = {
    square1id: [
                '#FFE600'


                ],

    square2id: [
                '#008B45'


                ]

};

var count = 0;

var changecol = function(){
    $.each(colourinfo, function(tileid, colarray){
    $('#'+tileid).css('background-color', colarray[count%colarray.length]);
}); 
    count++;
    };
    setInterval(changecol, 1000);
    });

我将不胜感激任何帮助。谢谢。

最佳答案

下面设置了一个数组，其中每个元素都是一个对象，为每个方 block 提供正常颜色和高亮颜色。通过 setInterval() 调用 changeColour() 函数将最后一个方 block 的颜色恢复为正常颜色，并将下一个方 block 的颜色更改为突出显示:

var colourInfo = [
    {id : "square1id",
      colourNormal : "#4D4D4D",
      colourHighlight : "#FFE600"},
     {id : "square2id",
      colourNormal : "#4D4D4D",
      colourHighlight : "#008B45"}
     // add your other squares' info here
    ];

var index = 0;
var changeColour = function(){
    $('#'+colourInfo[index]["id"]).css('background-color',
                    colourInfo[index]["colourNormal"]);
    if (++index >= colourInfo.length)
       index = 0;
    $('#'+colourInfo[index]["id"]).css('background-color',
                    colourInfo[index]["colourHighlight"]);
}

setInterval(changeColour,1000);

注意:changeColour() 函数中间的 if 语句只是递增索引并按顺序在数组周围循环。如果你想让方 block 随机改变颜色，你可以用类似的东西替换 if 语句

index = Math.floor(Math.random() * colourInfo.length);

编辑:我在上面假设(由于 David 使用 setInterval())这个想法是无限期地不断改变颜色。现在我发现我的想法是在我建议以下(未经测试的)更改后闪烁每个方 block 。 (是的，我知道这变得笨拙，但我不想从头开始，我认为重点是给大卫一些关于他可能如何做的想法，而不是做他的工作为他呈现一个经过单元测试和记录的精美杰作。)

var index = -1;
var changeColour = function(){
     if (index > -1) {
        $('#'+colourInfo[index]["id"]).css('background-color',
                     colourInfo[index]["colourNormal"]);
     }
     if (++index < colourInfo.length) {
        $('#'+colourInfo[index]["id"]).css('background-color',
                        colourInfo[index]["colourHighlight"]);
        setTimeout(changeColour,1000);
     }
}
setTimeout(changeColour,1000);

关于javascript - 如何修改此脚本以使用不同的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6286361/

27 4 0
文章推荐： JavaScript 无法在浏览器中运行
文章推荐： linux - 使用本地系统作为 ssh 客户端和服务器
文章推荐： linux - bash 脚本运行将进程发送到后台
文章推荐： php - 如何在分页元素中实现最后的步骤？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com