关注
分享
JavaScript教程学习笔记 实战笔记
木子木木的专栏
努力学习 天天向上。。。
展开
-
实现loading加载效果带百分比进度
html:<div class="d-loading" id="loading"> <div class="d-loadVpic"> <div class="d-opctv"></div> <div class="d-innervpic"></div> <div class="d-loadmesg">原创 2021-03-29 16:23:48 · 1383 阅读 · 0 评论 -
JavaScript内置对象 Global 和 Math
一，Global Global 对象是一种兜底对象，代码不会显示的访问它，它所针对的是不属于任何对象的属性和方法，不存在全局变量和全局函数，在全局作用域中定义的变量和函数都会变成Global对象的属性，isNaN(),isFinish(),parseInt(),parseFloat()都是Global对象的方法，还有其他一些方法：1，URL编码方法： encodeURI():用于对整个URI进行编码，不会编码属于URL组件的特殊字符； encodeURIComponent()...原创 2021-02-24 21:42:44 · 180 阅读 · 0 评论 -
JavaScript基本引用类型及原始值包装类型
一，基本引用类型：1，Date： 1.1 Date类型简介及两个辅助方法： Date类型将日期保存世界时间 1970年1月1日零时 至今所经过的毫秒数。使用这种存储格式，Date类型可以精确表示1970年1月1日之前及之后285161年的日期。 >>使用new操作符来调用Date构造函数来 创建日期对象：let nowDate = new Date(); 不给Date构造函数传参的话，创建的对象保存的是当前日期和时间。...原创 2021-01-31 20:56:46 · 225 阅读 · 0 评论 -
JavaScript实现 数字转换为万 千万 百万
function numberConversion(value) { const newValue = ['', '', ''] let fr = 1000 let num = 3 let txt = '' let fm = 1 while (value / fr >= 1) { fr *= 10 num += 1 } if (num <= 4) { // 千 newValue[0].原创 2020-12-23 19:46:55 · 3257 阅读 · 2 评论 -
JavaScript垃圾回收机制：如何减少JavaScript中的垃圾回收？
一，垃圾回收释义：垃圾回收基本思路：确定那个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间就会自动运行。垃圾回收程序必须跟踪记录那个变量还在使用，以及那个变量不会再使用，以便回收内存，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃；var n = 'java';var c = 'c++';var n = c;//重写nconsole.log(n);//'c++' 代码运行之后，“java”这个字符串失去了引用，系原创 2020-12-05 18:27:13 · 718 阅读 · 0 评论 -
JavaScript执行上下文：理解执行上下文
一，执行上下文： 变量或函数的上下文决定了它们可以访问那些数据，以及他们的行为，每个上下文都有一个关联的变量对象，而这个上下文中定义的所有变量和函数都存在于这个对象中上。虽然无法通过代码访问变量对象，但后台处理数据会用到它；在浏览器中，全局上下文是我们常说的window对象，因此所有通过var定义的变量和函数都会成为window对象的属性和方法，使用let和const的顶级声明，不会定义在全局上下文中，但在作用域链解析上效果是一样的。上下文在其所有代码执行完毕后会被销毁，包括定义在它上面的所有变量.原创 2020-11-29 19:27:40 · 267 阅读 · 0 评论 -
JavaScript变量：你知道原始值和引用值的区别吗
一，变量： （1）定义基本类型的值和引用类型的值方式类似，创建一个变量并为其赋值，但是当这个值保存在变量中后，对不同各类型值可以执行的操作则大相径庭，对于引用类型的值，可以为其添加属性和方法，也可以改变和删除其属性和方法，示例如下： 以下代码创建了一个对象并将其保存在了变量p中，为该对象添加了一个名为name的属性，并将字符串 'java' 付给了这个属性,又通过console.log()访问了这个属性。如果对象不被销毁或者这个属性不被删除，这个属性将一直存在；var p = new...原创 2020-11-28 21:11:08 · 186 阅读 · 0 评论 -
JavaScript函数：函数有多少种类呢？
一，函数基本语法： 1，函数基本语法如下：//基本语法：function functionName(a1,a2,...an){ statements}//函数示例：function yaya(name,age,sex){ console.log('我的名字:' + name +',我的年龄:' + age +',我的性别'+ sex)}yaya('yaya','18','女'); //我的名字:yaya,我的年龄:18,我的性别女函数中定义的 命名参数na..原创 2020-11-14 22:18:00 · 922 阅读 · 0 评论 -
JavaScript类型：数据类型
一，数据类型： 基本数据类型：Undefined Null Boolean String Number Symbol 引用数据类型： Object typeof 操作符用来检测给定变量的数据类型1，Undefined： Undefined 表示未定义，即在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined,只有一个值，类型就是Undefined类型； 例如：下面案例只声明了msg，并没有对其...原创 2020-11-14 20:57:35 · 151 阅读 · 0 评论 -
JavaScript 实现倒计时 及 定时功能
1倒计时： countTime(value)function countTime(value) {var date = new Date(); var now = date.getTime(); //设置截止时间 var endDate = new Date("2020/5/17 23:59:59"); var end = endDate.getTime(); //时间差 var differTime = end - now;...原创 2020-08-07 19:44:20 · 198 阅读 · 0 评论 -
JavaScript运动框架
说明：1,单定时器会存在问题，需要给每个元素加入定时器(关闭和打开定时器都互不干扰)；2,多物体运动框架中，所有东西都不能共用,把定义的变量作为属性加到元素身上；3，offsetWidth或offsetHeight等获取的是盒模型的尺寸，需要考虑padding border等，获取样式方式由offset变为 obj.style['width']方式；4,封装获取样式的js函数get...原创 2019-05-27 20:34:28 · 150 阅读 · 0 评论 -
JavaScript 实现多物体运动,解决单定时器，存在问题
存在问题及解决方式：单定时器，存在问题：原因：当执行startMove函数的时候，需要把上一个定时器关闭，整个程序就一个定时器，第一个div正在执行，第二个也随着执行，前一个定时器就会被删除；解决方式：分别给每个div增加定时器；demo：<!DOCTYPE html><html lang="en"><head> <me...原创 2019-05-05 18:10:02 · 235 阅读 · 0 评论 -
JavaScript Math对象方法 之 Math.abs() Math.ceil() Math.floor();
Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。1，Math.abs():方法可返回一个数的绝对值。语法：Math.abs(x)：如果 x 不是数字返回 NaN,如果 x 为 null 返回 0。例：2,Math.ceil():对一个数进行上舍入语法：Math.ceil(x)：大于等于 ...原创 2019-05-05 16:22:00 · 1490 阅读 · 1 评论 -
JavaScript运动之均速运动
1.在开始运动时，关闭已有定时器2.把运动和停止隔开(if/else)demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...原创 2019-05-03 19:41:49 · 114 阅读 · 0 评论 -
JavaScript运动之实现右侧底部悬浮框
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-05-03 18:45:13 · 393 阅读 · 0 评论 -
JavaScript运动之缓冲运动
1，当物体和终点的距离远，速度越大，当距离不断减小，速度不断减小，速度和距离成正比；速度=(目标值-物体当前位置值)/缩放系数2，speed速度不能为小数，当speed（速度)>0或者<0 时 需要向上取整（Math.ceil）或者向下取整（Math.floor）;3,缓冲运动的停止条件：两点重合（即运动物体和目的地重合）DOME:<!DOCTYPE html>...原创 2019-05-03 17:59:51 · 304 阅读 · 0 评论 -
JavaScript encodeURIComponent()函数
定义和用法encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。其他字符（比如 ：;/?原创 2019-04-23 16:29:31 · 413 阅读 · 0 评论 -
JS sort()排序
sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。语法：array.sort(sortfunction)例：arr.sort(function(a,b){ return a-b;});如果a-b > 0,则a和b交换位置。当然这样写出来的话是升序排列。如果要降序排则把a-b改成b-a就可以实现，就是说b大...原创 2019-04-21 22:47:24 · 3832 阅读 · 0 评论 -
原生JS实现平滑到指定位置（仿锚点效果）
点击按钮，页面滑动到指定位置,仿a标签锚点效果function goTarget(target) { var timer = null; var lastPos = 0; function goMove() { var currentPosition = document.documentElement.scrollTop || document.body...转载 2018-10-24 09:50:59 · 2819 阅读 · 3 评论 -
原生JS 获取非行间样式写法 及 style currentStyle getComputedStyle 的区别
1，style：兼容各大浏览器，获取不了外部样式,写了行内没有的样式,返回的是空值obj.style.attr(获取样式)obj.style.attr=“值” 设置属性值,2，currentStyle:该属性只兼容IE,不兼容火狐和谷歌obj.currentStyle.attrobj.currentStyle[“attr”]3，getComputedStyle:该属性是兼容火狐谷歌,...原创 2018-11-03 17:43:59 · 309 阅读 · 0 评论 -
JS基础之数组 splice 和 sort
一，splice:从数组中添加/删除元素，返回被删除的项目 会改变原始数组1，删除数组元素：第一个参数是从哪个位置开始删除元素,第二个参数 删除多少个元素var arr=[1,2,3,4,5,6,7];arr.splice(2,3)console.log(arr)结果：2，向数组插入元素：var arr=[1,2,3,4,5,6,7];arr.splice(2,0,'a',...原创 2018-11-03 19:15:36 · 400 阅读 · 0 评论 -
ES6中let与var的区别
通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not defined//计数器i只在for循环体内有效，在循环体外引用就会报错。变量提升现象：浏览器在运行代码之前...转载 2018-11-13 17:34:53 · 100 阅读 · 1 评论 -
ES6模块的import和export用法总结
ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。...转载 2018-11-13 18:34:17 · 1026 阅读 · 0 评论 -
js实现移动端H5页面音乐播放，兼容微信 safari浏览器
js代码：//音乐function music(){ var oMusic=document.getElementById("music"); var Audio=document.getElementsByTagName("audio")[0]; Audio.addEventListener("ended",function(event){原创 2018-11-14 18:50:47 · 4076 阅读 · 0 评论 -
js实现发送验证码倒计时
function countDownTime() { clearInterval(timer); var countDown = 60; var codeBtnTime = $('#simplifyLogin .pop_Sendver'); var timer=null; timer = setInterval(function () { i...原创 2018-11-22 19:22:34 · 535 阅读 · 0 评论 -
原生JS实现无缝滚动
js代码：var scroll = document.getElementById('scrollCont'); var soul = scroll.getElementsByTagName('ul')[0]; var aList = soul.getElementsByTagName('li'); var prev = document.getElementById('...原创 2018-12-04 20:55:50 · 2180 阅读 · 0 评论 -
javascript中childNodes与children的区别
1、childNodes：获取节点，不同浏览器表现不同；IE：只获取元素节点； 非IE：获取元素节点与文本节点； nodeType:节点类型 与childNodes配合使用; 解决方案：if(oUl.childNodes.nodeType == 1) { …} 2、children：获取元素节点，浏览器表现相同。建议使用children。3、parentNode：获取父元...原创 2018-12-04 21:40:09 · 699 阅读 · 0 评论 -
js实现根据不同时间显示不同内容
function timeMsg() { let timesArr = [ { time: '20190120', number: '1', pic: './img.pic1', message: '拜年'}, { time: '20190121', number: '2', pic: './img.pic2', message: '初二 '}, ...原创 2019-01-20 19:38:26 · 3828 阅读 · 0 评论 -
通过JS操作html元素方法总结
1、通过 id 找到 HTML 元素2、通过标签名找到 HTML 元素3、通过类名找到 HTML 元素提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。var x=document.getElementById(“intro”);var y=document.getElementsByTagName(“p”);①、改变 HTML 元素的内容 (innerHT...原创 2019-02-25 19:58:12 · 407 阅读 · 0 评论 -
JS操作DOM事件总结
Js中的事件行为,结构,样式分离的页面一般事件 onclick 鼠标点击时触发此事件ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件onmouseout 当鼠标离开某对象范围时触发此事件...原创 2019-02-25 20:28:06 · 448 阅读 · 0 评论 -
query获取url参数及url加参数的方法
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null...原创 2019-04-11 17:53:53 · 4588 阅读 · 0 评论 -
git命令行简写配置
1，敲一行命令，告诉Git，以后st就表示status：$ git config --global alias.st status然后在敲git st看看效果。2，co表示checkout，ci表示commit，br表示branch：$ git config --global alias.co checkout$ git config --global alias.ci commit...原创 2019-04-11 18:00:01 · 978 阅读 · 0 评论 -
原生javascript实现简易年历效果
JS代码：var calendarList=document.getElementById('calendarList');var yearLi=document.getElementsByTagName('li');var contentTexts=document.getElementById('contentTexts');var arrCalendar=['吃饭','睡觉','打豆...原创 2018-10-23 11:08:59 · 1482 阅读 · 1 评论