HTML summary

How to adjust the position of div in css

<div style="margin-left:5%; margin-top:20px"/></div>

margin-left is the left margin, margin-top is the upper margin, and can be negative

input text box length

<input style="width: 65px;height:-20px;" placeholder="搜素" name="key" type="text" id="key" onkeydown="onSearch(this)" value="" />

Width is wide, which can be a percentage, height is high and
placeholder is the default text displayed in the text box (details:
https://jingyan.baidu.com/article/ed2a5d1f60afa009f6be17da.html )
onkeydown Click the text box to execute the function, the code is the onSearch function
Give a chestnut:

function onSearch(obj){
    
    //js函数开始
  setTimeout(function(){
    
    //因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
    var storeId = document.getElementById('store');//获取table的id标识
    var rowsLength = storeId.rows.length;//表格总共有多少行
    var key = obj.value;//获取输入框的值
    var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起
    for(var i=1;i<rowsLength;i++){
    
    //按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
      var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值
      if(searchText.match(key)){
    
    //用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
        storeId.rows[i].style.display='';//显示行操作，
      }else{
    
    
        storeId.rows[i].style.display='none';//隐藏行操作
      }
    }
  },200);//200为延时时间
  
}

How to adjust table height, width, border color dynamically and statically in html

Details: https://jingyan.baidu.com/article/09ea3ede23398ec0afde395f.html

Execute all js code before the page is loaded

1. Dean Edwards (js Great God) solution, temporarily does not support Safari and Opera browsers:

<script type="text/javascript">

function init(){
    
    
if(arguments.callww.done)return;   //如果这个功能正在用再次加载时就结束

arguments.callee.done=true ;        //作为函数不加载多次的标志

 //创建页面正在加载的信息；

var text=document.createTextNode(“Page loaded”);

var message=documents.getElementsById("message")；

message.appendChild(text);

}

if(document.addEventListener){
    
      //mozilla显示

document.addEventListener("DomContentLoaded",init,false);

}

document.write("<script defer src=ie_onload.js><"+"/script>");   //ie浏览器

window.οnlοad=init;     //其他浏览器

</script>

This method has disadvantages: (1) Additional javascript files are required for the IE browser, (2) Safari and opera browsers are not supported

2. The solution to support page loading of safari browser:

<script type="text/javascript">

function init(){
    
    
if(arguments.callww.done)return;   //如果这个功能正在用再次加载时就结束

arguments.callee.done=true ;        //作为函数不加载多次的标志

if(_timer)  clearInterval(_timer);  //关闭计时器

//做其他工作；

}

if(document.addEventListener){
    
      //mozilla显示

document.addEventListener("DomContentLoaded",init,false);

}

//ie浏览器

document.write("<script id=_ie_onload defer src=javascript:viod(0)></script>");

var script=document.getElementById("_ie_onload");

script.onreadystatechange=fuunction(){
    
    
if(this.readyState=="complete"){
    
    
init();   //调回页面加载处理函数

}}

//针对safari

if(/WebKit/i.test(navigator.userAgent) ) {
    
      //嗅探

var _timer=setInterval(function(){
    
    
if(/loaded  | complete/.test(document.readyState) ){
    
    
init();     //调回页面加载处理函数

}}，10)

}

  window.οnlοad=init;     //其他浏览器

</script>

Details: https://my.oschina.net/u/2306718/blog/600180

JS realizes the instant search and filter function for a column of content in the table

Sometimes, we read the data from the database and display it in the table. At this time, a new requirement comes. Enter keywords in a search box, and the content of the table is filtered in real time.

The query of the database is triggered immediately, and the display is called back. It is slow, drags the server down, and reduces the user experience. At this time, if there is a pure js operation, the real-time filtering of a certain column of the table can improve the search speed and also Without occupying server resources, users are naturally satisfied.

The implementation is as follows, first look at the renderings,

Starting status:

Enter'e' in the input box, and the form will be filtered instantly. The rows containing'e' in the form are filtered, and the rows without'e' are hidden. Use the online HTML/JS/css running tool http://tools.jb51. net/code/HtmlJsRun, the test run effect is shown in the figure below:

Implementation code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS搜索筛选table列</title>
</head>
<script type="text/javascript">
function onSearch(obj){
     
     //js函数开始
  setTimeout(function(){
     
     //因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
    var storeId = document.getElementById('store');//获取table的id标识
    var rowsLength = storeId.rows.length;//表格总共有多少行
    var key = obj.value;//获取输入框的值
    var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起
    for(var i=1;i<rowsLength;i++){
     
     //按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
      var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值
      if(searchText.match(key)){
     
     //用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
        storeId.rows[i].style.display='';//显示行操作，
      }else{
     
     
        storeId.rows[i].style.display='none';//隐藏行操作
      }
    }
  },200);//200为延时时间
}
</script>
<body>
<div > <input name="key" type="text" id="key" onkeydown="onSearch(this)" value="" /></div>
<table width="200" border="1" id="store"><!-- id与函数的getId一致 -->
 <tr bgcolor="#CCCCCC">
  <td>name</td>
  <td> </td>
  <td> </td>
 </tr>
  <td>good</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>better</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>best</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>bad</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>worse</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>worst</td>
  <td> </td>
  <td> </td>
 </tr>
</table>
</body>

Reference: https://www.jb51.net/article/139940.htm
More form operations: https://www.jb51.net/Special/923.htm

Run the JS code when the web page is opened, without onclick

To open the webpage and run it directly, you need to call the window.onload() function:

<html>
    <head>
    </head>
    <body>
    <script type = "text/javascript">
        window.onload = function()
        {
     
     
            alert("hello");
        }
    </script>
    </body>
</html>

Just copy it directly to run, and the main function can be realized in function().
Details: https://www.cnblogs.com/liucaixia/p/5600929.html

About setTimeout() in JS

https://blog.csdn.net/budapest/article/details/82947029

How to call Js function in html

HTML composes web pages, CSS organizes web pages, and Javascript can add complex operations to web pages.

First of all, we must understand that HTML is static, if you want to implement complex and variable operations (such as functions, calculation results, etc.), you must use Javascript to operate.

Q. How to get the value of Javascript function in Html

HTML is static. Even if you write a Javascript function into HTML, you will not get the result of the function.

<!DOCTYPE html>
<html>
<body>
 
<p id="demo">demo()</p>
<script>
function demo(){
     
     
  return "cool"   
}
 </script>
</body>
</html>

html space

  

html loading page

You can use the open source loading https://github.com/claudiocalautti/spring-loaders
to clone the warehouse, find index.html in spring-loaders-master\build\js, check the effect, the loading time can be longer in main.js ,turn up

 setTimeout(function () {
    
    
        demo.spinner.setComplete();
      }, 1000);
    } else {
    
    
      // Perform real ajax request.
      demo.loadSomething();
    }
  },

Just set it to 1000, I have set it in the picture, 1000 is 1s

html5 canvas drawn starry sky background animation special effects source code

Details: https://www.jb51.net/jiaoben/412106.html

Mobile page HTML5 adaptive mobile phone screen width

Use meta tags, which is also a commonly used method

<meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

But there are also shortcomings, details: https://blog.csdn.net/lpf_leo1992/article/details/78793617