js入门(ES6)[一]---让网页动起来的js
代码哈士奇 117 2

如何理解JS

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

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

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

JS---赋予网页生命

一个简单的小示例带你了解js的效果
首先,给网页一个"脸" 在这里插入图片描述

<!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文件) 点击胡子有惊喜 在这里插入图片描述

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







  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!

未经本人允许,禁止转载

在这里插入图片描述


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910 在这里插入图片描述有问题可以下方留言,看到了会回复哦

预览图
评论区

索引目录