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

1.JS基础

1.1 JS概述

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

​ HTML:决定页面框架

​ CSS:美化页面

​ JS:提供用户交互

1.2 JS组成

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

1.3 ECMAScript语法:

  1. 变量是弱类型(无特定类型的变量,用var运算符将其初始为任意值)
  2. 区分大小写
  3. 在结尾部分的分号可有可无
  4. 注释和运算符与java相同
  5. “=”值和类型相同;“”值相同
  6. 写在script标签里面

1.4 ECMAScript的数据类型

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

​ (JS里面的类型自动转换)

​ JS声明变量:var 变量名=变量值

​ JS函数声明:function 函数名(){}

​ var 函数名=function(){}

1.5 JS输出

	
  • alert():直接弹框
function dd(){alert("好好学习,天天向上!")}
  • document.write():直接向页面输出

  • console.log():向控制台输出

  • innerHTML:向页面输出

  • 获取页面元素:

    • document.getElementById


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script>
			function dd(){
				var div1=document.getElementById("div1");
				div1.innerHTML="我是新的内容"
			}
		script>	
	head>
	<body>
		<input type="button" value="点击" onclick="dd()"/>
		<div id="div1">
			这里的内容将会改变!
		div>
	body>
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="提交" />
			
		form>
	body>
html>

2.轮播图自动播放

3.1 间隔器

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

3.2 点击切换图片


<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.函数内要完成的操作


<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 图片的隐藏和显示


<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>

你可能感兴趣的:(HTML前端,javascript,html)