初识javaScript

Silent Land

已于 2023-11-23 21:38:45 修改

阅读量751

点赞数

分类专栏： JavaScript 文章标签： js

于 2019-07-25 22:34:33 首次发布

本文链接：https://blog.csdn.net/weixin_44757417/article/details/97235944

版权

JavaScript 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

javaScript

js开发是一门脚本语言，由浏览器来解释执行，不需要经过编译
js声明变量： var 变量的名字
js声明函数：function函数的名称（参数的名字）{}
js开发步骤：
1. 确定事件
2. 事件要触发函数，所以我们要声明函数
3. 函数里面通常是去做一些交互操作
轮播图自动播放
切换图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		/*1.事件点击事件 onclick
		  2.事件要触发函数：changeImg
		  3.在函数中
		*/ 
			function changeImg(){
			// alert("要切换了")
			var img=document.getElementById("img1");
			img.src="img/8.jpg";
				
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击切换图片" onclick="changeImg()"/>
		<br />
		<img src="img/6.jpg" id="img1" />
	</body>
</html>

定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// window 对象是一个最顶层对象
			// window.setInterval("alert('123')",2000)
			function test(){
			console.log("调用了")	
			}
			// setInterval("alert('456')",2000)
			// setInterval("test()",2000);
			// setTimeout("test()",2000)
			var timeID;
			function startDinshiqi(){
				timeID=setInterval("test()",2000);
				
			}
			function stopDinshiqi(){
				// clearInterval(timeID);
				clearTimeout(timeID);
				
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="开启定时器" onclick="startDinshiqi()"/><br />
		<input type="button" name="" id="" value="取消定时器" onclick="stopDinshiqi()" /><br />
	</body>
</html>

图片自动轮播
1.确定事件：文档加载完成事件 onload
2.事件要触发：init()
3.函数里面要做一些事情：（通常回去操作元素，提供交互）
- 开启定时器：执行切换图片的函数changeImg
4.changeImg()
- 获得要切换图片的那个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			var index=0;
			function changeImg(){
				var img=document.getElementById("img1");
				//计算出当前要切换到第几张图片
				var curIndex=index%3+1;//0/1/2/3
				img.src="img/"+curIndex+".jpg";
				index=index+1;
			}
			function init(){
				setInterval("changeImg()",1000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="img/0.jpg" width="100%" id="img1" />
	</body>
</html>

定时器：
- setInterval:每隔多少毫秒执行一次函数
- setTimeout:多少毫秒之后执行一次函数
- clearInterval
- clearTimout
显示广告：
- img.style.display=“block”
- img.style.display=“none”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()"/>
		<input type="button" value="隐藏" onclick="hideImg()" /><br />
		<img src="img/0.jpg" id="img1">
		<script>
			var img=document.getElementById("img1");
			function showImg(){
			img.style.display="block";
			}
			function hideImg(){
				img.style.display="none"
			}
		</script>
	</body>
	
</html>

注意:代码一定要放在内容后面不然会报错
在这里插入图片描述

表单的校验：
* 校验用户名
1. 当用户鼠标移动到输入框中时，请给用户一个提示
* 事件：焦点事件 onfous
* 触发函数
* 在函数里面要做一些事情，校验一下用户输入
span 给用户信息
2. 当用户鼠标移开时，校验一下用户输入
事件：onblur
触发函数
函数要做事情
校验用户输入
得到用户输入的值
3. 当用户按键抬起时，校验一下用户输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		 
	</head>
	<script>
		function showTips(spanID,msg){
			var span=document.getElementById(spanID);
			span.innerHTML=msg;
		}
		function checkUsename(){
			var uvalue=document.getElementById("username").value;
			var span=document.getElementById("span_username");
			if(uvalue.length<6){
				span.innerHTML="对不起，太短了"
			}else{
					span.innerHTML="恭喜你！"
			}
		}
		function checkForm(){
		var flag=checkUsename();
		return flag;
		}
	</script>
	<body>
		<form action="../自动轮播图/图片自动轮播.html" onsubmit="return checkForm()" >
			用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6位')" onkeyup="checkUsename()" onblur="checkUsename()"/><span id="span_username"></span><br />
			<input type="submit" value="注册" />
		</form>
	</body>
</html>