JS--事件

最新推荐文章于 2021-07-25 11:05:12 发布

小伟呀

最新推荐文章于 2021-07-25 11:05:12 发布

阅读量90

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_43879167/article/details/113557394

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、toFixed方法
二、onchange
三、noclick和ondblclick
四、onfocus和onblur
五、onselect
六、onsubmit和onreset

一、toFixed方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>toFixed</title>
	</head>
	<body>
		<div id="1">78.236999</div>
		<button onclick="f1()">保留3位精度</button>
		<script type="text/javascript">
			function f1() {
				var inp = document.getElementById("1");
				var text = inp.innerHTML;
				var number = new Number(text);
				inp.innerHTML = number.toFixed(3);
			}
		</script>
	</body>
</html>

点击前：
在这里插入图片描述
点击后：

toFixed方法用于数字的精度运算，括号内的参数为要保留的小数位数。

二、onchange

【多用于下拉框中的省-市级联】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<select onchange="f1()">
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
		</form>
		<script type="text/javascript">
			function f1(){
				alert(new Date().toLocaleString());
			}
		</script>
	</body>
</html>

在这里插入图片描述

当使用下拉框时，就会执行f1方法。

三、noclick和ondblclick

【onclick是单击时响应，ondblclick是双击时响应】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button ondblclick="f1()">按钮</button>
		<script type="text/javascript">
			function f1(){
				alert(new Date().toLocaleString());
			}
		</script>
	</body>
</html>

在这里插入图片描述

双击按钮才会有反应。

四、onfocus和onblur

【onfocus是获得焦点，在网页中指的是闪烁的光标；onblur是失去焦点 】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		1<input type="text" onfocus="f1()" /><br />
		2<input type="text" onblur="f1()" />
		<script type="text/javascript">
			function f1(){
				alert(new Date().toLocaleString());
			}
		</script>
	</body>
</html>

在这里插入图片描述

1在获得焦点时执行方法，2在失去焦点时执行方法。

五、onselect

【选择时执行】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<textarea onselect="f1()">lllllllll</textarea>
		<script type="text/javascript">
			function f1(){
				alert(new Date().toLocaleString());
			}
		</script>
	</body>
</html>

在这里插入图片描述

选中一部分文本时，执行f1。

六、onsubmit和onreset

【onsubmit与onreset涉及到表单的2个按钮，书写位置是在form上】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form onsubmit="f1()" onreset="f2()">
			账号：<input type="text" name='username' placeholder="请输入账号"/><br />
			密码：<input type="password" name='pass' placeholder="请输入密码"/><br />
			<input type="submit" value="提交"/>
			<input type="reset" />
		</form>
		<script type="text/javascript">
			function f1(){
				alert("提交成功！");
			}
			function f2(){
				alert("重置成功！");
			}
		</script>
	</body>
</html>

小伟呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS--事件

文章目录一、toFixed方法二、onchange三、noclick和ondblclick四、onfocus和onblur五、onselect六、onsubmit和onreset一、toFixed方法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>toFixed</title> </head> <body> <di
复制链接

扫一扫

专栏目录