Web前端——JavaScript练习

Js练习

显示和隐藏，改变display属性(点击查看图片)

关键代码：

e.style.display = "block";
e.style.display = "none";

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示和隐藏</title>
		<script type="text/javascript">
			function showPicture(){
				//普通方式获得控件实例
				var e = document.getElementById("myimg");
				e.style.display = "block";
			}
			
			function hidePicture(){
				//querySelector是html5增加的
				//id前面得写#,class前面得写
				document.querySelector("#myimg").style.display = "none";
				//标签直接写即可,获取到第一个img标签
				//document.querySelector("img").style.display = "none";
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(0);"onclick="showPicture()">查看图片</a>
		<a href="javascript:void(0);"onclick="hidePicture()">隐藏图片</a>
		<br />
		<img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;"  >
	</body>
</html>

querySelector三种方法介绍

鼠标滑动更改内容 onmouseover

关键：
onmouse事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function moveToBlue(){
				var e = document.querySelector("#btn_blue");
				var e2 = document.querySelector("#btn_green");
				var div = document.querySelector("#content");
				e.style.border = "1px solid #ccc";
				e.style.backgroundColor = "white";
				e2.style.border = "none";
				e2.style.backgroundColor = "none";
				div.style.backgroundColor = "blue";
			}
			function moveToGreen(){
				var e = document.querySelector("#btn_blue");
				var e2 = document.querySelector("#btn_green");
				var div = document.querySelector("#content");
				e2.style.border = "1px solid #ccc";
				e2.style.backgroundColor = "white";
				e.style.border = "none";
				e.style.backgroundColor = "none";
				div.style.backgroundColor = "green";
			}
		</script>
	</head>
	<body>
		<div style="width: 100px;height: 50px;">
			<button id="btn_blue" style="width: 45px;"onmousemove="moveToBlue()">蓝色</button>
			<button id="btn_green" style="width: 45px;"onmousemove="moveToGreen()">绿色</button>
			<div id="content" style="background-color: blue;width: auto;height: 50px;"></div>
		</div>

		<br />
		<img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;">
	</body>
</html>

时间自动更新

关键代码：
Js中内置了Date对象

getFullYear 年
getMonth 月
getDate 日
getHours 小时
getMinutes 分钟
getSeconds 秒
getDay 星期几（0-6）星期日为0

方法	说明
getFullYear()	从 Date 对象以四位数字返回年份。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。

 var now = new Date();

 var time =now.getFullYear() + '年' + now.getMonth() + '月'
     + now.getDate() + '日'
     +now.getHours() +'时' + now.getMinutes() +'分' + now.getSeconds() + '秒';

setTomeout(fn, 周期：豪秒): 周期只会执行一次
setInterval(fn, 周期：豪秒)：间隔周期一直执行

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间自动更新</title>
	</head>
	<body>
		<p></p>
		<script type="text/javascript">
			function setTime() {
				var date = new Date();
				var time = date.toTimeString();
				document.querySelector("p").innerText = time;
			}
			setTime();
			//setIime不能加上括号
			// setInterval(setTime, 1000);
			//加括号得得在外层加双引号或者单引号
			setInterval("setTime()", 1000);
		</script>
	</body>
</html>

源码（es拼接字符串）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<p></p>
		<script type="text/javascript">
			function setTime() {
				var now = new Date();
				// 通过css的选择符获得html元素
				var timer1 = document.querySelector('p');
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				var hours = now.getHours();
				var minutes = now.getMinutes();
				var seconds = now.getSeconds();
				//es6中模板字符串,拼接
				timer1.innerText = `${year}年${month}月${date}日${hours}时${minutes}分${seconds}秒`;
			}
			setTime();
			//setIime不能加上括号
			// setInterval(setTime, 1000);
			//加括号得得在外层加双引号或者单引号
			setInterval("setTime()", 1000);
		</script>
	</body>
</html>

表单

关键代码：e.checked=true;

全选和反选的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function selectAll() {
				var hobbys = document.getElementsByName("hobby");
				var btn = document.getElementById("checkall");
				//原生for,推荐使用这一种
				/*
				for (var i = 0; i < hobbys.length; i++) {
					if (btn.checked) {
						hobbys[i].checked = true;
					} else {
						hobbys[i].checked = false;
					}

				}
				*/
				//使用foreach,使用HBuilderX,在内置的浏览器会报错,提示foreach不起作用
				//使用谷歌浏览器打开则没有问题,下面使用lambda也是如此情况,可能是HBuilder的bug
				hobbys.forEach(function(hobby) {
					//如果全选的是选中,则把全部设置为选中的状态,否则设置为未选中
					if (btn.checked) {
						hobby.checked = true;
					} else {
						hobby.checked = false;
					}
				});
				//使用lambda
				/*
				hobbys.forEach((hobby) => {
					console.log(hobby);
					if (btn.checked) {
						hobby.checked = true;
					} else {
						hobby.checked = false;
					}
				});
				*/

			}

			function selectRevese() {
				var hobbys = document.getElementsByName("hobby");
				for (var i = 0; i < hobbys.length; i++) {
					//设置为另外的状态
					hobbys[i].checked = !hobbys[i].checked;
				}
			}
		</script>
	</head>
	<body>

		<input type="checkbox" name="hobby">读书<br><br>
		<input type="checkbox" name="hobby">电影<br><br>
		<input type="checkbox" name="hobby">游戏<br><br>
		<input type="checkbox" name="hobby">游泳<br><br>
		<input type="checkbox" name="hobby">写代码<br><br>
		<input type="checkbox" id="checkall" onclick="selectAll()">全选 </input>
		<button type="button" onclick="selectRevese()">反选</button>


	</body>
</html>