ホームページ  >  記事  >  ウェブフロントエンド  >  よく使用される 3 つの JS 時間応答

よく使用される 3 つの JS 時間応答

零到壹度
零到壹度オリジナル
2018-04-03 18:00:331995ブラウズ

この記事では主に、よく使われる 3 つの JS タイム レスポンスを紹介します。これが非常に優れていると思います。編集者をフォローして見てみましょう

ここでは、よく使われる時間応答をいくつか紹介します。これらは使い方が簡単で、非常に効果的です。

1. キートリガー

この種のイベント応答は非常に一般的であり、最初から発生します。簡単な例を挙げると:

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>

このタイプのメソッドの核心は、onclick+関数名をボタンのラベルに追加して関数をトリガーすることです。

2. マウストリガーまたは Enter トリガー。

最初の方法の欠点は実際には非常に明白です。たとえば、データのバッチを処理する必要があり、入力ボックスが多数ある場合、各ボックスの後に確認キーを追加する必要がありますか?これはユーザー入力にとって非常に不合理であるため、フォームまたは複数の入力ボックスに入力するときに効果をトリガーするにはマウスまたは Enter キーを使用する方がはるかに効率的です。

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

中心となるのは、onchange を使用して入力ボックス内の関数を呼び出すことです。入力後、マウスで任意の場所をクリックするか、Enter キーを押して関数を呼び出します。さまざまな処理に応じてさまざまな効果が表示されます。

3. いつでもトリガー

実際の例では、Web ページでオンライン 16 進数変換を試すことができます。つまり、確認キーを押したり、Enter を押したりする必要はありません。いつでも行うことができます。紛失して、いつでも変換できます。携帯電話の電卓を含め、入力値をリアルタイムに計算します。

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

使用方法の核心はoneKeyUp + メソッド名です。これに加えて、onkeypress、oneKeyDown などのキーワードもあります。個人的にはoneKeyUpの方が実用的だと思います。

関連する推奨事項:

Webトランザクションの応答時間の内訳と詳細な分析

ブートストラップの垂直応答に基づくjQueryのタイムライン効果

Node.jsを使ってみよう10のヒントアプリを使ってより速く実行するには

以上がよく使用される 3 つの JS 時間応答の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。