我从哪里开始java脚本代码?

时间:2017-02-02 01:04:24

标签: javascript html5 css3

我要做的是当输入的输入值为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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

使用script标记链接您的外部脚本。

更改

<link rel="javascript" type="text/javascript" href="square.js">

<script type="text/javascript" src="square.js"></script>