According to the variable name we want to visit

Sometimes we need to visit a website dynamically , For example, in a large number of static websites , We may be because after the database call , Render at the front end html More difficult , At this time, we may want to use a large number of already written html file , As an alternative " database ", Search a web page for , We use the value they entered as the name of our website , In this way, a kind of , We have the illusion of a database , So how do we achieve this effect

Look at my code

  <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 {
       
      /* The input box height is set to 40px, border occupy 2px, The total height is 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 Button border Does not occupy the peripheral size , Set height 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=" Please enter the Chinese characters to search " />
	 <input type="button" value=" Search for " id="btn"/>
    <br>
  
</div>
<script type="text/javascript">
 //   function $(id){ return document.getElementById(id);}// Packaged $(id) function 

    btn.onclick = function(){  // When the button is clicked , Execute function （ Event source  .  event  =  Event handler ）
        alert(litter.value);
       // TestAjax1();
      let name=litter.value;
window.location.href='../fz/'+name+'.html'
    }
   
  
</script>

The effect is as follows ：

Here we search Han

result ：

  So we can see that it can give the public the illusion of having a database , Because this style is much more difficult in front-end rendering than in table rendering , So the author directly uses a large number of static websites to imitate the form of database , Search through the contents of the search bar .

Because the above code is not complete , But the core has given , Readers can adopt... According to their own situation