Three commonly used JS time responses-JS Tutorial-php.cn

Three commonly used JS time responses

零到壹度

Release： 2018-04-03 18:00:33

Original

2038 people have browsed it

This article mainly introduces three commonly used JS time responses. The editor thinks they are quite good. Now I will share them with you and give them a reference. Let’s follow the editor and take a look.

Here are several commonly used time responses. They are very simple to use and have good effects.

1. Button trigger

This kind of event response is very common, and it is also encountered from the beginning. To give a simple example:

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

Copy after login

The core of this type of method is to add onclick+function name to the button label to trigger the function.

2. Mouse trigger or enter trigger.

The shortcomings of the first method are actually very obvious. For example, if I want to process a batch of data and there are many input boxes, do I need to add a confirmation key after each box? This is very unreasonable for user input, so it will be much more efficient to use the mouse or enter key to trigger the effect when filling in a form or multiple input boxes.

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

Copy after login

The core is to use onchange to call the function in the input box. After filling in, the function will be called by clicking anywhere with the mouse or pressing enter. Different effects will appear according to different processing.

3. It is better to trigger

at any time. For real-life examples, you can try the online hexadecimal conversion on the web page, which does not require you. Pressing the confirm key does not require you to press enter. You can enter it at any time and convert it at any time. Including the calculator on the mobile phone, it calculates the input value in real time.

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

Copy after login

The core of the usage method is oneKeyUp+method name. In addition to this, there are also keywords onkeypress, oneKeyDown, etc. Personally, I think oneKeyUp is more practical.

Related recommendations:

Breakdown and in-depth analysis of Web transaction response time

jQuery timeline effects based on Bootstrap vertical response

10 ways to make your Node.js application run faster Skill

The above is the detailed content of Three commonly used JS time responses. For more information, please follow other related articles on the PHP Chinese website!