js入门(ES6)[一]---让网页动起来的js

2021-01-26 15:52:00 浏览数 (1)

如何理解JS

我们之前讲了html入门,就像是做机器人的外壳,但是光有外壳,再好看也华而不实,也可以理解成你想要一个好看的机器人,同时也想它能做家务勤劳啥的

JavaScript是一种网络的脚本语言,一般用于web开发 实现web中功能 js是解释型语言,我们在编译c语言时,会发现下面有个编译成功,然后出现exe文件,再运行exe文件,就是直接编译成机器语言,但是js不是编译后运行,而是边运行边解释,不直接生成机器语言,先生产中间代码,然后由解释器边解释边运行 ECMAScript 6.0 简称ES6:是JS的版本标准,2015.06 发版。

重要的事情说三遍,多看文档 JavaScript ES6

JS—赋予网页生命

一个简单的小示例带你了解js的效果 首先,给网页一个"脸"

代码语言:javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.head{
				width: 180px;height: 130px;border: 1px solid black;
			}
			.hair{
				width: 180px;height: 30px;background-color: black;color: white;text-align: center;
			}
			.beard{
				width: 180px;height: 15px;background-color: black;color: white;text-align: center;position: relative;top: 62px;font-size: 5px;
			}
		</style>
	</head>
	<body>
		<div class="head">
			<div class="hair">头发</div>
			<div style="position: relative;left: 18px;top: 5px;">
				<input type="button" value="左眼" />
				<input type="button" value="右眼" style="position: relative;left: 50px;" />
				<input type="button" value="嘴巴" style="position: absolute;left: 50px;top: 50px;"/>
			</div>
			<div class="beard">胡子</div>
		</div>
	</body>
</html>

让脸动起来 点击头发,头发消失 我们让点击左眼出现眨眼动作 点击右眼切换眼睛 点击嘴巴说话(有语音,动图无法展示,自行脑补,语音内容:我是代码哈士奇,可以在网上找在线语音合成自行合成mp3使用,或者播放自己的mp3文件) 点击胡子有惊喜

代码语言:javascript复制
	<body>
		<div class="head">
			<div class="hair" id="hair" onclick="noHair()">头发</div>
			<div style="position: relative;left: 18px;top: 5px;">
				<input type="button" value="左眼" id="leftEye" style="height: 22px;" onclick="blinkEye()"/>
				<input type="button" value="右眼" id="rightEye" style="position:absolute;left: 100px;" onclick="changeEyse()"/>
				<input type="button" value="嘴巴" style="position: absolute;left: 50px;top: 50px;" onclick="speak()"/>
			</div>
			<div class="beard" id="beard" onclick="changeBeard()">胡子</div>	
		</div>
		<script type="text/javascript">
		function noHair(){
			let hair = document.getElementById("hair");
			hair.style.backgroundColor = "white";
			setTimeout(function(){alert("头发都没有");},1000)
		}
		function blinkEye(){
			let leftEye = document.getElementById("leftEye");
			leftEye.style.height = "2px";
			setTimeout(function(){leftEye.style.height="22px"},100)
		}
		function changeEyse(){
			let rightEye = document.getElementById("rightEye");
			if(rightEye.type=="button"){
				rightEye.type = "image";
				rightEye.src = "./eye.PNG";
			}else{
				rightEye.type = "button";
			}
		}
		function speak(){
			let audio = new Audio("./speak.mp3");
			audio.play();
		}
		function changeBeard(){
			let beard = document.getElementById("beard");
			beard.innerText = "我是小可爱";
		}
		</script>
	</body>

是不是很好玩呢 我们自己定义了一张脸,定义了脸的功能。 从这篇文章开始 我们开始学习js基础 让我们一起让脸动起来吧!加油!奥里给!

学习JS的方法 多学多练习多看文档 JavaScript手册 ES6教程

  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行更新,博客主页:https://blog.csdn.net/qq_42027681。

未经本人允许,禁止转载

后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 python:推荐不温卜火 一定要看哦 一些插件的使用等

大学之道亦在自身,努力学习,热血青春

0 人点赞