JavaScript初学笔记（记录自学）

六个核桃君

于 2019-03-29 22:01:31 发布

阅读量344

点赞数

分类专栏：初学JavaScript（学习笔记）

本文链接：https://blog.csdn.net/qq_43354761/article/details/88899629

版权

这篇博客记录了JavaScript初学者的学习笔记，包括页面校验、自动轮播图片、控制台定时器、显示与隐藏图片、表单校验改进、全选全不选功能、DOM操作及省市联动案例等实战应用，详细介绍了实现过程和运行结果。

摘要由CSDN通过智能技术生成

什么是JavaScript ？
在这里插入图片描述

js简单的页面校验

<script>
			function cheakForm(){
    
// 				var input1 = document.getElementById("111");
// 				var input2 = input1.value;
// 				if(input2.length >= 6){
    
// 					return true;
// 				}
// 				else{
    
// 					alert("用户名太短！");
// 				}
// 				return false;
// 			
			//邮箱的校验
			var email = document.getElementById("email");
			var Uemail = email.value;
			if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(Uemail)){
    
				alert("校验成功");
			}
			else{
    
				alert("校验失败");
				return false;
			}
			return true;
			}
		</script>
	</head>
	<body>
		<form action="../../02-网站注册页面/网站注册页面.html" onsubmit="return cheakForm()">
			用户名：<input type="text" id="111" /><br />
			邮箱：<input type="text" id="email" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>

运行结果
在这里插入图片描述
点击之后

自动轮播图片之
切换图片

<script>
			function changeImg(){
    
				var img = document.getElementById("1001");
				img.src = "../img/1-161104143944.gif";
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击切换"  onclick="changeImg()"/>
		<br />
		<img src="../img/222.jpg" id="1001"/>
	</body>

运行结果
在这里插入图片描述
点击之后

自动轮播图片之
定时器

<script>
			function test(){
    
				console.log("setInterval被调用了");
			}
			var timerID;
			function startDingshiqi(){
    
				timerID = setInterval("test()",3000);
			}
			
			function stopDingshiqi(){
    
				cleraInterval(timerID);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开启定时器" onclick="startDingshiqi()"/>
		<input type="button" value="关闭定时器" onclick="stopDingshiqi()"/>
	</body>

运行结果
在这里插入图片描述
调出Console控制台之后，点开启定时器

图片自动轮播案例
步骤分析
在这里插入图片描述

<script>
			var index = 0;
			function changeImg(){
    
				var img = document.getElementById("2333");
				var curindex = index%3+1;//能得到 1  2  3
				img.src = "../img/"+curindex+".jpg";
				index = index + 1;
			}
			
			function init(){
    
				setInterval("changeImg()",1500);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" width="100%" id="2333" />
	</body>

运行结果
点开之后，首先是
在这里插入图片描述
1.5秒之后

又1.5秒之后

完成了图片轮播

在这里插入图片描述

显示和隐藏图片

<script>
			function hideImg(){
    
				var img = document.getElementById("img1");
				img.style.display = "none";
			}
			
			function showImg(){
    
				var img = document.getElementById("img1");
				img.style.display = "block";
			}
		</script

最低0.47元/天解锁文章

六个核桃君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript初学笔记（记录自学）

什么是JavaScript ？js简单的页面校验<script> function cheakForm(){// var input1 = document.getElementById("111");// var input2 = input1.value;// if(input2.length >= 6){// ...
复制链接

扫一扫

专栏目录