JS--事件

文章目录

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

一、toFixed方法


<html>
	<head>
		<meta charset="utf-8">
		<title>toFixedtitle>
	head>
	<body>
		<div id="1">78.236999div>
		<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>

点击前:
JS--事件_第1张图片
点击后:
在这里插入图片描述

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

二、onchange

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


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

JS--事件_第2张图片

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

三、noclick和ondblclick

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


<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是失去焦点


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

JS--事件_第3张图片

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

五、onselect

【选择时执行】


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

JS--事件_第4张图片

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

六、onsubmit和onreset

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


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

你可能感兴趣的:(JS,js)