HTMLの要約

記事のディレクトリ

cssでdivの位置を調整する方法

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

margin-leftは左マージン、margin-topは上マージンであり、負の値にすることができます

入力テキストボックスの長さ

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

幅は広く、パーセンテージにすることができ、高さは高く、
プレースホルダーはテキストボックスに表示されるデフォルトのテキストです（詳細：
https：
//jingyan.baidu.com/article/ed2a5d1f60afa009f6be17da.html ）onkeydownテキストボックスをクリックして実行します関数、コードはonSearch関数です
栗を与える：

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为延时时间
  
}

HTMLでテーブルの高さ、幅、境界線の色を動的および静的に調整する方法

詳細：https：//jingyan.baidu.com/article/09ea3ede23398ec0afde395f.html

ページが読み込まれる前にすべてのjsコードを実行する

1. Dean Edwards（js Great God）ソリューションは、一時的にSafariおよびOperaブラウザーをサポートしていません。

<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>

この方法には欠点があります。（1）IEブラウザには追加のJavaScriptファイルが必要です。（2）SafariおよびOperaブラウザはサポートされていません。

2.サファリブラウザのページ読み込みをサポートするソリューション：

<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>

詳細：https：//my.oschina.net/u/2306718/blog/600180

JSは、テーブル内のコンテンツの列のインスタント検索およびフィルター機能を実現します

データベースからデータを読み取ってテーブルに表示することもありますが、このとき、新しい要件が発生します。検索ボックスにキーワードを入力すると、テーブルの内容がリアルタイムでフィルタリングされます。

データベースのクエリがすぐにトリガーされ、表示がコールバックされます。速度が遅く、サーバーが下にドラッグされ、ユーザーエクスペリエンスが低下します。この時点で、純粋なjs操作がある場合は、テーブルの特定の列は検索速度を向上させることができ、サーバーリソースを占有することなく、ユーザーは当然満足します。

実装は次のとおりです。最初にレンダリングを見てください。

開始ステータス：
ここに画像の説明を挿入します

入力ボックスに「e」と入力すると、フォームは即座にフィルタリングされます。フォームに「e」を含む行はフィルタリングされ、「e」を含まない行は非表示になります。オンラインのHTML / JS / css実行ツールhttpを使用してください。：//tools.jb51。net/ code / HtmlJsRun、テスト実行の効果を次の図に示します。
ここに画像の説明を挿入します

実装コード：

<!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>

参照：https：//www.jb51.net/article/139940.htm
その他のフォーム操作：https：//www.jb51.net/Special/923.htm

Webページを開いたときに、クリックせずにJSコードを実行します

Webページを開いて直接実行するには、window.onload（）関数を呼び出す必要があります。


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

直接コピーして実行するだけで、function（）でメイン関数を実現できます。
詳細：https：//www.cnblogs.com/liucaixia/p/5600929.html

JSのsetTimeout（）について

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

HTMLでJs関数を呼び出す方法

HTMLはWebページを構成し、CSSはWebページを編成し、JavascriptはWebページに複雑な操作を追加できます。

まず、HTMLは静的であることを理解する必要があります。複雑で可変の操作（関数、計算結果など）を実装する場合は、操作にJavascriptを使用する必要があります。

Q.HTMLでJavascript関数の値を取得する方法

HTMLは静的です。Javascript関数をHTMLに記述しても、関数の結果は得られません。

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

htmlスペース

&nbsp;

html読み込みページ

オープンソースの読み込みhttps://github.com/claudiocalautti/spring-loaders
を使用してウェアハウスのクローンを作成し、spring-loaders-master \ build \ jsでindex.htmlを見つけ、効果を確認すると、読み込み時間が長くなる可能性がありますmain.jsで、めくりますここに画像の説明を挿入します

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

1000に設定するだけです。写真で設定しました。1000は1秒です。

html5キャンバス描画星空背景アニメーション特殊効果ソースコード

詳細：https：//www.jb51.net/jiaoben/412106.html

モバイルページHTML5アダプティブ携帯電話の画面幅

メタタグを使用します。これも一般的に使用される方法です。

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

しかし、欠点もあります。詳細：https：//blog.csdn.net/lpf_leo1992/article/details/78793617