前端入门学习笔记五十五

最新推荐文章于 2024-07-20 18:16:53 发布

物恰冰可乐

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量271

点赞数

分类专栏：前端文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/m0_65384293/article/details/128227309

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>button</p>
		<button onclick="getElementById('button').innerHTML=Date()">时间</button>
		<p id="button"></p>
	</body>
</html>

单击 <button> 元素来显示当前日期、日期和时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="盗墓笔记" onclick="myFunction()">盗墓笔记</p>
		<script>
		function myFunction() {
		  document.getElementById("盗墓笔记").style.color = "skyblue";
		}
		</script>
	</body>
</html>

如何通过单击来更改 <p> 元素颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p onclick="myFunction(this, 'plum')">终极笔记</p>
		<script>
		function myFunction(elmnt,clr) {
		  elmnt.style.color = clr;
		}
		</script>
	</body>
</html>

如何通过单击来更改 <p> 元素颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>"onclick" 事件分配给 window 对象</p>
		<script>
		window.onclick = myFunction;
		function myFunction() {
		  document.getElementsByTagName("BODY")[0].style.backgroundColor = "skyblue";
		}
		</script>
	</body>
</html>

"onclick" 事件分配给 window 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		盗墓笔记1: <input type="text" id="field1" value="沙海"><br>
		盗墓笔记2: <input type="text" id="field2"><br><br>
		<button onclick="myFunction()">复制文本</button>
		<script>
		function myFunction() {
		  document.getElementById("盗墓笔记1").value = document.getElementById("盗墓笔记2").value;
		}
		</script>
	</body>
</html>

单击按钮将一些文本从输入字段复制到另一个输入字段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>JavaScript Number() 函数</p>
		<button onclick="myFunction()">盗墓笔记</button>
		<p id="HTML"></p>
			<script>
				function myFunction() {
				  var h1 = true;
				  var h2 = false;
				  var h3 = new Date();
				  var h4 = "999";
				  var h5 = "999 888";
				  var dd = 
				  Number(h1) + "<br>" + 
				  Number(h2) + "<br>" + 
				  Number(h3) + "<br>" + 
				  Number(h4) + "<br>" + 
				  Number(h5);
				  document.getElementById("HTML").innerHTML = dd;
				}
			</script>
	</body>
</html>

JavaScript Number() 函数
Number() 函数将对象参数转换为表示对象值的数字。
如果该值无法转换为合法数字，则返回 NaN
语法
Number(object)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>JavaScript Number() 函数</p>
		<button onclick="myFunction()">盗墓笔记</button>
		<p id="html"></p>
			<script>
				function myFunction() {
				  var w1 = true;
				  var w2 = false;
				  var w3 = new Date();
				  var w4 = "999";
				  var w5 = "999 888";
				  var rr = 
				  Number(w1) + "<br>" + 
				  Number(w2) + "<br>" + 
				  Number(w3) + "<br>" + 
				  Number(w4) + "<br>" + 
				  Number(w5);
				  document.getElementById("html").innerHTML = rr;
				}
			</script>
	</body>
</html>