JavaScript自学2--改变HTML图像，验证数字

最新推荐文章于 2022-09-29 12:22:01 发布

本华平

最新推荐文章于 2022-09-29 12:22:01 发布

阅读量206

点赞数

分类专栏： JavaScript学习

JavaScript学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面例子会改变图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

自己在自己电脑上打代码时记得改图片路径与名称
//以上实例中代码 element.src.match(“bulbon”) 的作用意思是：检索《img id=“myimage” οnclick=“changeImage()” src="/images/pic_bulboff.gif" width=“100” height=“180”> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif.
本例子实际上为两个图片的改变.

改变HTML样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

将id为demo文字段落的改变为红色字体

验证数字

JavaScript 常用于验证用户的输入。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

var x=document.getElementById(“demo”).value;
if(x==""||isNaN(x))
{
alert(“不是数字”);
} 是验证书否为数字的函数，我也不知道怎么弄的，毕竟才学，以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断