如何在不刷新页面的情况下“连续”更改背景颜色[重复]

Posted 2023-03-06

【中文标题】如何在不刷新页面的情况下“连续”更改背景颜色[重复]

【英文标题】：How to change background color "continuously" without refreshing the page [duplicate]

【发布时间】：2017-04-27 06:04:37

【问题描述】：

这里有什么办法可以像彩虹一样不断地改变背景颜色吗？

【问题讨论】：

是的！但我没有看到你的试验？你有什么要展示的吗？很高兴回答。

您可以使用 javascript 间隔计时器来更改背景颜色

您自己尝试过吗？它会很好地为您提供有问题的工作以获得更好的帮助

5 秒谷歌搜索：codepen.io/nohoid/pen/kIfto

***.com/questions/19175664/…

【参考方案1】：

希望你需要这样的东西。

var body = $('body');
var colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple'];
var currentIndex = 0;
setInterval(function () 
   body.css(
     backgroundColor: colors[currentIndex]
   );
   if (!colors[currentIndex]) 
       currentIndex = 0;
    else 
       currentIndex++;
   
, 100);

body 
  transition: 200ms ease;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

[癫痫加重]

癫痫警告！

【参考方案2】：

我希望你的意思是彩虹效应？这个 CSS 代码可以提供它：

.wrapper  
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;

@-webkit-keyframes rainbow 
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

@-moz-keyframes rainbow 
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

@-o-keyframes rainbow 
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

@keyframes rainbow  
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

来源：https://codepen.io/nohoid/pen/kIfto

【参考方案3】：

对于颜色，您可能需要使用CSS animation。

<div class="wrapper"></div>

.wrapper  
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;

@-webkit-keyframes rainbow 
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

@-moz-keyframes rainbow 
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

@-o-keyframes rainbow 
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

@keyframes rainbow  
    0%background-position:0% 82%
    50%background-position:100% 19%
    100%background-position:0% 82%

对于图像之间的更改，代码会有所不同：

<div class="topstrip" style="height:100px;width:100px;"></div>

    <script>
    var imagebackground = 0;
    var imgbackgrounds = [];
    imgbackgrounds[0] = '/images/image1.jpg';
    imgbackgrounds[1] = '/images/image2.jpg';
    imgbackgrounds[2] = '/images/image3.jpg';
    imgbackgrounds[3] = '/images/image4.jpg';
    imgbackgrounds[4] = '/images/image5.jpg';


    function changeimage() 
        imagebackground++;
        if(imagebackground > 4) imagebackground = 0;

        $('.topstrip').fadeToggle("slow",function() 
            $('.topstrip').css(
                'background-image' : "url('" + backgrounds[imagebackground] + "')"
            );
            $('.topstrip').fadeToggle("slow");
        );


        setTimeout(changeimage, 5000);
    

    $(document).ready(function() 
        setTimeout(changeimage, 5000);        
    );
    </script>