JS实践（乾坤未定，你我皆是黑马4-3）

上一篇后半部分写的不好，就是浅显的罗列语法。排序，下周补充其余6种…
这篇讲了几个js案例：开关灯，汉字自动播放，轮播图
看完之后你能学会dom操作以及成就感。

javascript 原生方法对dom节点的操作包括：
访问（查找）、创建、添加、删除、替换、插入、复制、移动等。

唉，等等等等？？？ 什么是dom？？？

js分为ECMAScript、DOM、BOM三部分，第一部分是语法，就是变量啊函数啊，操作符啊等等等等的，DOM是操作文档对象，BOM是浏览器对象

今天只看DOM,也就是咱们写的HTML文档对象，整个html都归DOM管，
就是说可以通过dom来任意修改html文档

文档乖乖躺好，咱们做点什么呐？
理论没意思，直接上案例，“开关灯”

html里面有两个button元素，所谓元素就是用标签和它肚子里的一坨代码，标签就是尖括号加单词，这两个元素都有id，就是唯一识别，跟身份证一样，id的属性值不可以与其它元素一样。
我们用id来唯一识别这个元素，在做css时可以用 # 也就是id选择器来选这个元素，修改样式，那么js也有相应的方法-------document.getElementById("*****");
为什么前面要加上document???前面学了对象，我们把一类的方法，封装到一个对象里…而document就是大名鼎鼎的DOM对象（如果对面向对象不理解，后面还会讲）
总之我们通过id来拿一个元素的时候（一般做功能时用id拿），语法这样写：document.getElementById(“一个id”);

那么同理，通过class拿元素时是document.getElementsByClassName(“类名”);
只不过类名可以重复，所以我们拿到的是一个伪数组 [元素1，元素2，元素3]
伪数组用起来和和数组没什么不同，取值arr[i]，遍历for循环，只不过它不是Array，所以不能直接用Array的方法。
为什么要加一个直接呐？

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p></p><p></p><p></p><p></p><p></p><p></p><p></p><script>var ps = document.getElementsByTagName("p");Array.prototype.forEach.call(ps, function(value, index) {console.log(index + "_" + value);});</script>
</body></html>

就像上面所使用的的代码一样，我们在js里面有改变指针方向的方法，如果你不清楚什么是call，什么是bind什么是apply，那么只能说我写的上一篇偷懒了，后面会和面向对象编程一样，单独写一篇来讲清楚，这里仅仅介绍，js还有这么一个玩意。

至此我们使用document.getElementById("")拿到on和off两个按钮元素，使用document.getElementsByClassName("")[0]拿到页面里的第一个类名为box的元素
（由此可见，做功能时用id比较靠谱，数第几个，万一再来几个box，就容易乱了）

拿到之后绑定事件，我们在硬件上操作，敲键盘，这都被浏览器所监听，只要我们在js上写了事件对应的函数，浏览器就会在这个事件发生时，调用这个函数。
用到的事件名叫点击事件，有两种写法，我们用的是简单的写法，给onclick属性赋值，其中click这个单词是点击的意思，常见的属性还有onmouseleave,mouseleave是鼠标移开的意思，还有onfocus等等
精讲讲的是概念，就不会罗列了，罗列的话，其实也没要讲，讲了不一定记住，更不一定会用，而精讲就是为了让大家会用。
off.οnclick=function(){ 巴拉巴拉 }
元素的这个属性赋值为一个函数，剩下的都归浏览器管，事件触发时，调用这个函数

接下来我们来写事件所绑定的函数
box.style.backgroundColor="#9e9e9e";
里面就写了一行代码，元素的一个叫做style的属性的一个backgroundColor属性，赋值为"#9e9e9e"，看上去就是改颜色的
元素的style属性是一个对象，其实元素在内存中就是一个对象，对象是什么？是一种以键值对存储数据的数据类型，也是类的实例，类是对一类现实事物的抽象，对象代表其中一个
style里面存着很多信息，它们都跟样式有关
style对象都有啥属性？
它的属性就是css样式的属性啊，只不过写法不太一样，当一个属性有连接符时需要，需要用大写来表示，意思就是css的margin-left在style对象的属性里面是marginLeft
所以我们想要修改元素的样式时，只需要 元素.style.属性名=“属性值”;
#9e9e9e是颜色的一种表示方法，之前的博客有讲过，那篇比较长，讲了全部css，这里重新说一下。

好了现在可以自己动手敲这么一个超级小的开关灯案例了
当然，这篇进度条告诉我们，这篇文章还有很…很长…

//查找节点
document.getElementById(“id”);// 通过id查找，返回唯一的节点
document.getElementsByClassName(“class”);// 通过class查找，返回值为nodeList类型
document.getElementsByTagName(“div”);// 通过标签名查找，返回值为nodeList类型

//创建节点
document.createDocumentFragment();//创建内存文档碎片
document.createElement();//创建元素
document.createTextNode();//创建文本节点

//添加节点
var ele = document.getElementById(“my_div”);
var oldEle = document.createElement(“p”);
var newEle=document.createElement(“div”);
ele.appendChild(oldEle);

//删除节点
ele.removeChild(oldEle);

//替换节点
ele.replaceChild(newEle,oldEle);

//插入节点
ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点

//复制节点
var cEle = oldEle.cloneNode(true);//深度复制，复制节点下面所有的子节点
cEle = oldEle.cloneNode(false);//只复制当前节点，不复制子节点

//移动节点
var cloneEle = oldEle.cloneNode(true);//被移动的节点
document.removeChild(oldEle);//删除原节点
document.insertBefore(cloneEle,newEle);//插入到目标节点之前

上面是知识的罗列，放在这里供你复习
我们只讲案例，不讲罗列的到底是什么

<script>var str = "今天是7月4日，哈哈哈哈，再过一个月，就要找乐子了，啦啦啦啦";var len = str.length;var length = len;var 爱了爱了 = document.createElement("p");爱了爱了.addClassName = "爱了爱了";爱了爱了.innerText = "开始： ";document.getElementsByTagName("body")[0].appendChild(爱了爱了);var timer = setInterval(() => {var span = document.createElement("span");span.innerText = str.charAt(length - len);爱了爱了.appendChild(span);len--;if (len <= 0) {clearInterval(timer);}}, 200);</script>

然后我们给他稍微加点特效，看不明白的可以去翻阅我之前的博客，有讲css
赋值粘贴就可以运行，这里文字一出来是模糊的，后来好了，这就是为什么要把每个字当做一个元素处理。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {text-shadow: 0 0 60px transparent;transition: text-shadow 1.5s;color: transparent;font-size: 30px;font-weight: 900;opacity: 0;}</style>
</head><body><script>var str = "今天是7月4日，哈哈哈哈，再过一个月，就要找乐子了，啦啦啦啦";var len = str.length;var length = len;var 爱了爱了 = document.createElement("p");爱了爱了.addClassName = "爱了爱了";爱了爱了.innerText = "开始： ";document.getElementsByTagName("body")[0].appendChild(爱了爱了);var timer = setInterval(() => {let span = document.createElement("span");span.innerText = str.charAt(length - len);爱了爱了.appendChild(span);lala(span)len--;if (len <= 0) {clearInterval(timer);}}, 200);function lala(span) {setTimeout(() => {span.style.textShadow = "0 0 0 black";span.style.opacity = "1";}, 300);}</script>
</body></html>

我们创建了p元素，并把它添加到body元素肚子里,
我们创建了一个一个的字，然后加到p元素里，
当然，这里我们练习了定时器的使用，定时循环！

创建元素操作就是createElement("");
添加元素是appendChild()
或者给innerHTML重新赋值（顾名思义，这是在修改里面的html代码）
innerText则是修改里面的文字信息，修改TEXT_NODE节点信息
类操作就是操作class的属性

/*** obj:制定元素* cn:对应类名**///定义一个函数，来向一个元素添加类function addClass(obj,cn){if(!hasClass(obj,cn)){obj.className+=" "+cn;}}//定义一个函数判断一个元素有没有这个类function hasClass(obj,cn){//创建一个正则表达式var reg=new RegExp("\\b"+cn+"\\b");return reg.test(obj.className)}//定义一个函数来删除对应元素中的类function removeClass(obj,cn){//创建一个正则表达式var reg=new RegExp("\\b "+cn+"\\b");//删除Classobj.className=obj.className.replace(reg,"");}//定义一个函数来切换一个类function toggleClass(obj,cn){//判断是否有这个类if(hasClass(obj,cn)){//如果有则删除removeClass(obj,cn);}else{//没有则添加addClass(obj,cn);}}

这里正则的\b是单词边界，类名为a，不能把aa也算上
正则的test()方法很简单，匹配到符合规则的就返回true

定时器就是开的时候返回值保存一下，清空的时候传进去

再写一个js原生轮播图的案例，下午来写…

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul,ol,li {margin: 0;padding: 0;list-style: none;}.container {width: 900px;height: 500px;margin: 100px auto;}.slider {position: relative;min-width: 300px;width: 500px;height: 400px;margin: 0 auto;border: 5px solid black;border-radius: 20px;overflow: hidden;}ul {width: 600%;height: 100%;display: flex;position: absolute;}ul>li {flex: 1;height: 100%;border-radius: 10px;}ol {position: absolute;left: 50%;transform: translateX(-50%);top: 80%;width: 270px;height: 30px;}ol>li {width: 30px;height: 100%;float: left;position: relative;;}ol>li:not(:last-child) {margin-right: 30px;}.heart:hover {animation-name: shake;animation-duration: .5s;animation-iteration-count: infinite;}.heart div {width: 100%;height: 100%;position: absolute;background: rgba(238, 23, 23, 0.449);}.heart:hover div {animation-name: shadow;animation-duration: .5s;animation-iteration-count: infinite;}.topLeft,.topRight {border-radius: 50% 50% 0 0;}.topLeft {transform: translate(-50%, 0) rotate(-45deg)scale(.8, .9);}.topRight {transform: translate(51%, 0) rotate(45deg)scale(.8, .9);}.bottom {transform: translate(5%, 55%) rotate(45deg) scale(.7, .8);}/* 定义动画 */@keyframes shake {from {transform: scale(.9, .9);}to {transform: scale(1.1, 1.1);}}@keyframes shadow {from {}to {box-shadow: 0px 0px 50px red;}}.controls {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;height: 50px;display: none;}.left,.right {position: absolute;width: 50px;height: 50px;border-radius: 50%;top: -25px;}.right {right: 0;}ul>li:nth-child(1) {background-color: indigo;}ul>li:nth-child(2) {background-color: pink;}ul>li:nth-child(3) {background-color: yellow;}ul>li:nth-child(4) {background-color: green;}ul>li:nth-child(5) {background-color: blue;}ul>li:nth-child(6) {background-color: indigo;}</style>
</head><body><div class="container"><div class="slider"><ul id="罪魁祸首"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol><li class="heart d"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li><li class="heart d"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li><li class="heart d"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li><li class="heart d"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li><li class="heart d"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li></ol><div class="controls"><li class="heart left"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li><li class="heart right"><div class="topLeft"></div><div class="topRight"></div><div class="bottom"></div></li></div></div></div><script>var con = document.getElementsByClassName("controls")[0];var slider = document.getElementsByClassName("slider")[0];var 罪魁祸首 = document.getElementById("罪魁祸首");var ol_lis = document.getElementsByClassName("d");var left = document.getElementsByClassName("left")[0];var right = document.getElementsByClassName("right")[0];var index = 0;var timer;function 垃圾函数(index) {let target = -parseInt(index * (1 / 6) * (罪魁祸首.offsetWidth));let current = parseInt(罪魁祸首.offsetLeft);clearInterval(timer);timer = setInterval(() => {current += target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);// 一行很丑的代码罪魁祸首.style.left = current + "px";if (target === current) {clearInterval(timer);}}, 30);}slider.onmouseenter = function() {con.style.display = "block";}slider.onmouseleave = function() {con.style.display = "none";}Array.prototype.forEach.call(ol_lis, function(value, i) {value.onclick = function() {! function(i) {index = i;垃圾函数(index);}(i);}});left.onclick = function() {if (index === 0) {罪魁祸首.style.left = -(5 / 6) * (罪魁祸首.offsetWidth) + "px";index = 5;}index--;垃圾函数(index);}right.onclick = function() {if (index === 5) {罪魁祸首.style.left = 0;index = 0;}index++;垃圾函数(index);}</script>
</body></html>

轮播图嘛，似乎我又忘了做自动轮播了，，，希望好心的客人能在评论区补充上，自动轮播。
这里面的小特效就是鼠标移到按钮上，播放css动画，心变大变小，阴影模糊程度时高时低。
讲一讲那行很丑的代码吧：
current += target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
这行应该拆开写的，不好看，所以我说他丑。
current是没有单位的当前的定位的left的值
+=就是加一点，有可能是往左走，也有可能是往右走，所以右面用三元表达式分了两种情况
target>current?:
如果目标在现在右边，那么目标大（left值），那么所以:左边表达式的值就被+上去了
目标大，那么加的这一步是正数，取天花板（Math.ceil()），这样一来最小也是1px，另外px也不用小数，发光点一定大于1，除以10是为了一小步一小步的走
这样一来，每次走1/10，最小走1px;

这里有防抖处理，就是开启定时器之前先clearInterval(),把上一个定时器去除
如果不去除，那么两个一起跑，结果你自己试试就知道了。
节流、防抖这两个操作，回头还有机会再讲一遍。现在没有实际的场景，扯犊子没什么意思。
节流就是搞一个东西记录时间，判断两次点击之间时间差，太短了的话就return
某些网站的搜索功能是10s一次，不知道你有没有看过~~~~

下一篇会讲js开发一个小游戏

JS实践（乾坤未定，你我皆是黑马4-3）相关推荐

乾坤未定你我皆是黑马 | 猿代码
曾经年少立志三千如今踌躇百步无寸功懵懂半生庸碌成尘转眼高堂皆白发儿女蹒跚学堂中碎银几两催人老心乃少,皱纹却上眉中浮生醉酒回梦里青春人依旧只叹时光太匆匆子成人父,方解油盐非易事 ...
激励自己的短句文案乾坤未定你我皆是黑马
1.不要因为没有掌声就放弃梦想. 2.别人都在前进,我为什么要停下. 3.要么出众,要么出局. 4.没有合格的黑夜,也就无所谓真正的黎明. 5.你会有不期而遇的温暖和永生不息的希望. 6.星星发亮是为 ...
软件测试工程师应该怎样规划自己?成为年薪30W+测试工程师（乾坤未定，皆是黑马）
今天在知乎上被邀了一个问题,软件测试工程师应该怎样规划自己?16年毕业,技术方面已经渣到不行,因为之前的公司没有Python自动化测试这个要求,有些迷茫.我把我的问题回答贴出来希望可以帮助到更多有类型 ...
【知乎高赞】软件测试工程师应该怎样规划自己?成为年薪30W+测试工程师（乾坤未定，皆是黑马）
今天在知乎上被邀了一个问题,软件测试工程师应该怎样规划自己?16年毕业,技术方面已经渣到不行,因为之前的公司没有Python自动化测试这个要求,有些迷茫.我把我的问题回答贴出来希望可以帮助到更多有类型 ...
乾坤未定，你我皆是黑马！
朋友是一位五年的资深Java开发工程师,先前我是迷茫的,他告诉我:乾坤未定,你我皆是黑马!特别建议我年轻的时候去技术性公司闯一闯,他说,才毕业出来,如果真的还没有想好往某一方面发展,那更建议往技术方面 ...
JS基础（乾坤未定，你我皆是黑马4-2）
上一篇呐就是纯粹为了跟js见个面不知道上手是不是搞得有点上头这篇来讲JS基础语法,小白(不会闭包的)可以认真看一下这篇介绍了JS语法.打印99乘法表.数组去重.数组排序****js知识点罗列学 ...
JS运行原理与机制（乾坤未定，你我皆是黑马4-5）
上一篇讲的是js小游戏实践了面向对象编程----------易于理解我们记得小鸟.天空.管子就能记得这个游戏是怎么写出来的 js原理与运行机制浏览器的渲染进程进程与线程进程是cpu资源分配的 ...
Java岗：从5个35k的offer中被踢出局，最后沉下心来，最后拿下了心仪的大厂offer~你我皆为黑马！！
背景今天这篇文章的灵感来自一个粉丝的亲身经历,想必也是求职浪潮中很多朋友的经历,内卷大环境找不到满意工作的人太多了,之前也有很多人问过我怎么才能找到不错的工作,甚至是进大厂,所以今天就借这位粉丝的经 ...
生如蝼蚁当立鸿鹄之志，命薄似纸应有不屈之心，乾坤未定，你我都是黑马！(祝大家飞黄腾达前程似锦)
上联:有志者.事竟成,破釜沉舟,百二秦关终属楚下联:苦心人.天不负,卧薪尝胆,三千越甲可吞吴优秀会上瘾! 优秀会传染! 生如蝼蚁,当立鸿鹄之志.命如薄纸,却有不屈之心.乾坤未定,你我皆是黑马祝你 ...

JS实践（乾坤未定，你我皆是黑马4-3）

JS实践（乾坤未定，你我皆是黑马4-3）相关推荐

最新文章

热门文章