JavaScript入门实例(1)

最新推荐文章于 2023-02-19 22:12:05 发布

小九九99

最新推荐文章于 2023-02-19 22:12:05 发布

阅读量441

点赞数

分类专栏： Web前端开发文章标签： javascript 前端 vue.js

小九九

本文链接：https://blog.csdn.net/weixin_52733998/article/details/123324471

版权

Web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.按键事件实现改变文字内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
	<script type="text/javascript">
	function changetext(){
		document.getElementById("text").innerHTML="Hello！JavaScript";
	}
	</script>
</head>
<body>
	<h1>按键实现文字切换</h1>
	<p id="text">如何快速修成前端高手</p>
	<button type="button" onClick="changetext()">点我一下</button>
</body>
</html>

2.通过JavaScript改变HTML的图像

<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('firstimage')
	if (element.src.match("firstimage"))
 	{
  		element.src="E:\JAVA学习笔记\Javaweb/man.jpg"
  	}
  		element.src="E:\JAVA学习笔记\Javaweb/plove.gif"
}
</script>
<img id="firstimage" onclick="changeImage()" src="man.jpg">
<h1>点击图片可进行切换(开光灯同理)</h1>
</body>
</html>

3.点击更改字体的颜色

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
	<h1 id="text">JavaScript可以更改HTML的元素</h1>
	<script>
	function bt1(){
		var x=document.getElementById("text");
		x.style.color="blue";
	}
	</script>
<button type="button" onClick="bt1()">按键</button>
</body>
</html>

4.JavaScript验证输入判断

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<h1>JavaScript验证实验测试</h1>
	<p align="left">请输入内容，若内容不为数字则浏览器会弹出提示框</p>
	<input type="text" id="input1">
	<script>
	function search(){
		var x=document.getElementById("input1").value;
		if(x==""||isNaN(x))
			{
				alert("输入的内容不为数字")
			}
	}
	</script>
<button type="button" onClick="search()">play</button>
</body>
</html>

小九九99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门实例(1)

1.按键事件实现改变文字内容<!doctype html><html><head><meta charset="utf-8"><title>JavaScript</title> <script type="text/javascript"> function changetext(){ document.getElementById("text").innerHTML="Hello！JavaScript
复制链接

扫一扫