Question

.question1sidebar{
	top: 150px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.question2sidebar{
	top: 220px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.question3sidebar{
	top: 290px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.question4sidebar{
	top: 360px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.question5sidebar{
	top: 430px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.question6sidebar{
	top: 500px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.question7sidebar{
	top: 570px;
	left: 65px;
	position: absolute;
	font-weight: bold;
	font-size: 40px;
	border-bottom: solid;
	border-color: #5D5C5A;
}
.left{
	float: left;
	width: 150px;
	background-color: white;
	height: 100%;
	padding: 300px 100px;
	border-right: solid #918A88;
	border-bottom: solid #7C7776;
}

所以我正在创建一个包含7个阶段的网站，在侧面我放置了类似第1-7阶段的东西，我基本上想要的是用户所处的水平，将有一个灰色复选标记切换到绿色复选标记返回和第四个表示他们在那个级别上，当他们进入下一个级别时，点击一个按钮，下一个级别闪烁（从灰色复选标记变为绿色标记回灰色复选标记）

function question1(){
	if(var i=0; i>2; i++){
	 var greycheckmark = document.getElementById("greycheckmark");
	 this.src = "img/green.png"
   i++
	}
  
}

<div class="left">
	<div class="question1sidebar">
		Question1
</div>
<img src="img/grey.png" id="greycheckmark" style="max-width: 100px; max-height: 75px; position: absolute; top: 143px; left: 230px;" onload="question1()">
	<div class="question2sidebar">
		Question2
</div>
	<div class="question3sidebar">
		Question3
</div>
	<div class="question4sidebar">
		Question4
</div>
	<div class="question5sidebar">
		Question5
</div>
	<div class="question6sidebar">
		Question6
</div>
	<div class="question7sidebar">
		Question7
</div>
</div>

我试图用javascript完成的是用增量器做一个if和else语句，如果我等于0那么它会增加一次并显示不同的图片然后减少并显示原始图像

Answer 1

您需要在JS中使用setInterval函数来切换灰色和绿色图像。

以下是我编写的JavaScript示例：

//We use this to check if the image is grey or green
var active = false;

  setInterval(function(){
    var greycheckmark = document.getElementById("greycheckmark");

    //If it is active(green) set it to grey
    if(active)
    {
        //You will need to replace this image with your grey image
        greycheckmark.src = "http://www.clker.com/cliparts/9/d/J/p/D/g/check-grey-hi.png";
    }
    else
    {
         //You will need to replace this image with your green image
         greycheckmark.src = "https://openclipart.org/image/2400px/svg_to_png/167549/Kliponious-green-tick.png"
    }

    //change the state to the opposite (active -> inactive or vice versa)
    active = !active

  //This specifies the timeout of the function in milliseconds(The bigger the value the slower the change)
  }, 500);

这是一个JSFiddle：https://jsfiddle.net/3kjusoaj/

两个图像交换不断

1 个答案: