JS基础：点击改变文本、表单校验、轮播图自动播放、图片的隐藏和显示

最新推荐文章于 2022-06-08 09:56:41 发布

何同学。

最新推荐文章于 2022-06-08 09:56:41 发布

阅读量314

点赞数

分类专栏： HTML前端文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45100706/article/details/105701232

版权

HTML前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.JS基础

1.1 JS概述

JavaScript是一种直译式的脚本语言(由浏览器进行解释执行，java是一种脚本语言)

HTML：决定页面框架

CSS：美化页面

JS：提供用户交互

1.2 JS组成

ECMAScript：核心部分，定义了JS的语法规范
DOM：
BOM：浏览器对象模型Browser Object Model

1.3 ECMAScript语法：

变量是弱类型（无特定类型的变量，用var运算符将其初始为任意值）
区分大小写
在结尾部分的分号可有可无
注释和运算符与java相同
“=”值和类型相同；“”值相同
写在script标签里面

1.4 ECMAScript的数据类型

基本类型：string number boolean undefine null 引用类型对象/内置对象

（JS里面的类型自动转换）

JS声明变量：var 变量名=变量值

JS函数声明：function 函数名(){}

var 函数名=function(){}

1.5 JS输出

	<!--JS开发步骤：
		1.确定事件：提交事件onsubmit
		2.事件触发函数
		3.在函数中完成校验
	-->

alert()：直接弹框

function dd(){alert("好好学习，天天向上！")}

document.write()：直接向页面输出
console.log()：向控制台输出
innerHTML：向页面输出
获取页面元素：
- document.getElementById

<!--点击改变文本-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function dd(){
				var div1=document.getElementById("div1");
				div1.innerHTML="<font color='red' size='7'>我是新的内容</font>"
			}
		</script>	
	</head>
	<body>
		<input type="button" value="点击" onclick="dd()"/>
		<div id="div1">
			这里的内容将会改变！
		</div>
	</body>
</html>

<!--表单校验-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkForm(){
				var input1=document.getElementById("name");
				var name=input1.value;
				if(name.length>6){//对用户名进行校验
					alert("用户名最多不超过六位！")
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form action="Test.html" onsubmit="checkForm()">
			用户名：<input type="text" id="name"/><br />
			密码：<input type="password" /><br />
			<input type="submit" value="提交" />
			<!--<input type="submit" value="提交" οnclick="checkForm()"/>-->
		</form>
	</body>
</html>

2.轮播图自动播放

3.1 间隔器

调用间隔器的方法
window.setInterval(“alert(123)”,3000);//每隔3秒弹框提示

3.2 点击切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function changeIMG(){
				alert("切换成功！")
				var img=document.getElementById("img1");
				img.src="../img/img/2.jpg"
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击切换图片" onclick="changeIMG()"/>
		<br />
		<img src="../img/img/1.jpg" id="img1"/>
	</body>
</html>

3.3 图片自动播放

步骤分析：
1.确定事件：文档加载完成事件 onload()
2.事件要触发的操作 init()
3.函数内要完成的操作

<!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;
				img.src="../img/img/"+curIndex+".jpg";
				index+=1
			}
			function init(){
				setInterval("changeIMG()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/img/1.jpg" id="img1" width="100%"/>
	</body>
</html>

3.4 图片的隐藏和显示

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