根据变量名来访问我们想要的网站

有时候我们需要动态去访问某个网站，比如在大量静态网站中，我们可能因为数据库调用后，在前端渲染制作html比较困难，这时候我们可能想用大量已经写好的html文件，作为一种另类的"数据库"，在一个网页中搜索，我们使用他们输入的值作为我们网站的名字，这样就可以达到一种，我们有数据库的假象，那么我们如何达到这种效果呢

来看俺的代码叭

  <style>

      .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 1200px;
    height: 800px;
}

.flex-item {
 
    width: 600px;
    height: 800px;
    margin: 10px;
}
    .container{
 
      width: 500px;
       
      height: 50px;
       
      margin: 150px 50px 50px 50px;
       
      }
       
       
      .parent {
       
      width: 100%;
       
      height: 42px;
       
      margin: 50px 50px 50px 50px;
       
      position: relative;
       
      }
       
       
       
      .parent>input:first-of-type {
       
      /*输入框高度设置为40px, border占据2px，总高度为42px*/
       
      width: 380px;
       
      height: 40px;
       
      border: 1px solid #ccc;
       
      font-size: 16px;
       
      outline: none;
       
      }
       
       
       
      .parent>input:first-of-type:focus {
       
      border: 1px solid #317ef3;
       
      padding-left: 10px;
       
      }
       
       
       
      .parent>input:last-of-type {
       
      /*button按钮border并不占据外围大小，设置高度42px*/
       
      width: 100px;
       
      height: 44px;
       
      position: absolute;
       
      background: #317ef3;
       
      border: 1px solid #317ef3;
       
      color: #fff;
       
      font-size: 16px;
       
      outline: none;
       
      }</style>
<div class="container">
	<br>
  <div class="parent">
    <input id="litter" type="text" placeholder="请输入要搜索的汉字" />
	 <input type="button" value="搜索" id="btn"/>
    <br>
  
</div>
<script type="text/javascript">
 //   function $(id){ return document.getElementById(id);}//封装的$(id)函数

    btn.onclick = function(){  //按钮点击时，执行函数（事件源 . 事件 = 事件处理程序）
        alert(litter.value);
       // TestAjax1();
      let name=litter.value;
window.location.href='../fz/'+name+'.html'
    }
   
  
</script>

效果如下：

这里我们搜索汉

结果：

 所以可以看到是可以给大众一种有数据库的错觉，因为这种风格在前端渲染的难度要远大于表格的渲染，所以作者就直接使用大量静态网站来模仿数据库的形式，通过搜索栏的内容来实现搜索。

因为上面的代码并不全，但核心已经给出，读者可以结合自己情况适当采用