我要做的是当输入的输入值为1-12时,颜色将填入相应的框中。 1-4为红色,5-9为黄色,10-12为绿色,灰色框为重置按钮。我正在通过我的JavaScript书籍,并且有点困难时间试图弄清楚如何解决这个问题。如何解决这个问题的一点点见解将有很大的帮助和赞赏。
body {
background-color: #006699;
}
#fm {
float: left;
position: absolute;
margin-left: 35%;
margin-top: 20.7%;
}
#wrap {
float: left;
position: absolute;
margin-left: 15%;
margin-top: 20%;
}
#green{
/*background-color: #00ff00; Color Reference */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(0, 255, 0, 1);
}
#yellow{
/*background-color: #ffff00; */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(255, 255, 0, 1 );
}
#red{
/* background-color: #ff0000; Color Reference */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(255,0,0,1);
}
#gray{
/* background-color: #c0c0c0; Color Reference */
float: left;
width: 40px;
height: 40px;
margin: 5px;
border: 5px solid rgba(192,192,192,1);
}
#green:active {
background-color: #00ff00;
}
#yellow:active {
background-color: #ffff00;
}
#red:active {
background-color: #ff0000;
}
#gray:active {
background-color: #c0c0c0;
}

<!DOCTYPE html>
<html>
<head>
<title> Square </title>
<link rel="stylesheet" type="text/css" href="square.css">
</head>
<body>
<div id="wrap">
<div id="green"></div>
<div id="yellow"></div>
<div id="red"></div>
<div id="gray"></div>
</div>
<form id="fm">
<b>Input value from 1-12</b> <br>
<input type="text" id="inputvalue" name="value">
</br>
</form>
</body>
<link rel="javascript" type="text/javascript" href="square.js">
</html>
&#13;
答案 0 :(得分:2)
使用script
标记链接您的外部脚本。
更改
<link rel="javascript" type="text/javascript" href="square.js">
要
<script type="text/javascript" src="square.js"></script>