Question

我想知道如何从搜索栏获取输入

以及如何替换div中的图像

我尝试创建一个简单的网站来获取图片然后显示，因为我不想下载每张图片并在photoshop中合并

这是我试过的。

P.S。这是我的空闲时间来探索如何使用html css和javascript。附：无需阅读我的CSS。我只想要一些建议来使用javascript获取数据谢谢。

＆＃13;

function getInput() {
  var input_symbol = get input from search bar
  var input_symbol = input_symbol.concat(*BK);
  
/***** after that use the value to get data from this website
****** by 5 periods 30min 120min day week month 
http://www.investorz.com/investorzChart.php?
mode=pc
&Provider=DDC
&symbolnsources=input_symbol
&Size=1200*1080
&End=20170124
&Start=
&period=Monthly //weekly //daily //Minutely
&interval=1 //120 and 30 (for Minutely period)
&Cycle=MONTH1 //WEEK1 DAY1 //MINUTE120 MINUTE30 (for Minutely period)
&Type=3
&ticket=1
&Scale=0
&EMA=5;10;25;50;75;200
&MA=
&OVER=;;;;
&IND=RSI(7);MACD(12,26,9);;;
&COMP=
&ShowBar=100
&max=400
&Skin=InvestorLight
&Layout=2Line;Default;Price;HisDate
&Width=1
&TimeStamp=21;50;1485183010.73 //current time
*************************************************** then replace all of 5 divs /
}

＆＃13;

body, html {
  padding: 3px 3px 3px 3px;

  background-color: #d8dbe2;

  font-family: Verdana, sans-serif;
  font-size: 11pt;
  text-align: center;
}
#custom-search-input {
  margin:0;
  margin-top: 10px;
  padding: 0;
}

#custom-search-input .search-query {
  padding-right: 3px;
  padding-right: 4px \9;
  padding-left: 3px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */

  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

#custom-search-input button {
  border: 0;
  background: none;
  /** belows styles are working good */
  padding: 2px 5px;
  margin-top: 2px;
  position: relative;
  left: -28px;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #000000;
}

.search-query:focus + button {
  z-index: 3;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 2px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

img {
  max-width: 800px;
  height: auto;
  width: auto\9; /* ie8 */
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
      <div class="container">
          <div class="row">
              <div id="custom-search-input">
                  <div class="input-group col-md-12">
                      <input type="text" class="  search-query form-control" placeholder="ADD SYMBOL" />
                      <span class="input-group-btn">
                        <button class="btn btn-danger" type="button" onclick="getInput();">
                            <span class=" glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                  </div>
              </div>
          </div>
      </div>
      <table>
          <tr>
              <td>
                  <div id="img1"><img src="img1.png"></div>
              </td>
              <td>
                  <div id="img2"><img src="img2.png"></div>
              </td>
              <td>
                  <div id="img3"><img src="img3.png"></div>
              </td>
          </tr>
          <tr>
              <td>
                  <div id="img4"><img src="img4.png"></div>
              </td>
              <td>
                  <div id="img5"><img src="img5.png"></div>
              </td>

          </tr>
      </table>
  </body>
</html>

＆＃13;

在提交按钮后输入文本或在搜索栏中输入

0 个答案: