Question

我试图每2秒更改一次H1元素的轮廓颜色。所以我使用了这个JavaScript代码...但它只从黄色变为橙色一次，并且一直保持在橙色。我该怎么做才能让它在两种颜色之间闪烁？请用JS术语而不是JQuery Library回复

这是我的JavaScript代码，我是JS的新手：

var myVar = setInterval(function(){ colorFlicker() }, 2000);

function colorFlicker(){
    var y = document.getElementById("mainH1");
    y.style.outlineColor = y.style.outlineColor == "#ff944d" ? "#d9ff66": "#ff944d";
  }

Answer 1

不要在javascript中检查颜色，返回的颜色取决于浏览器，并且通常采用#!/bin/bash names="RA RB R C RD" while read -r line; do echo line: "$line" done <<< "$names"或rgb(200,33,33)格式，或者在旧浏览器中使用十六进制格式，而是使用标记

rgba(244,22,244,1)

var myVar = setInterval(colorFlicker, 500);

var flag = true;

function colorFlicker() {
    var y = document.getElementById("mainH1");
    y.style.outlineColor = flag ? "#d9ff66" : "#ff944d";
    flag = !flag;
}

#mainH1 {outline: 2px solid #ff944d;}

Answer 2

使用rgb()作为默认颜色，然后调整您的条件：

＆＃13;

var myVar = setInterval(colorFlicker, 1000);

function colorFlicker() {
  var y = document.getElementById("mainH1");

  y.style.outlineColor = y.style.outlineColor == "rgb(255, 148, 77)"?"#d9ff66":"rgb(255, 148, 77)";
}

＆＃13;

h1 {
  outline-style: dotted;
  outline-color: rgb(255, 148, 77);
}

＆＃13;

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

＆＃13;

Answer 3

应使用CSS处理样式更改。然后，您可以使用JavaScript安全地切换将CSS样式附加到元素的类：

/* css */
#mainH1 { outline: /* some color */ }
#mainH1.alternateColor { outline: /* some other color */ }

// JS
var y = document.getElementById("mainH1");
function colorFlicker(){
  y.classList.toggle('alternateColor');
}

首次更改颜色后，轮廓颜色闪烁的JavaScript setInterval无效

3 个答案: