首页 > web前端 > js教程 > 正文

三种常用的JS时间响应

零到壹度
发布: 2018-04-03 18:00:33
原创
1989 人浏览过

这篇文章主要介绍了三种常用的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>
登录后复制

这一类方法的核心就是在button的标签内加入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.随时触发

这样的用法还是比较好的,生活中的实例可以去试试看网页的在线进制转换,那个就是不需要你按确认键也不需要你按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事务响应时间的细分以及深入分析

基于Bootstrap垂直响应的jQuery时间轴特效

让你的Node.js应用跑得更快的10个技巧

以上是三种常用的JS时间响应的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板