JavaScript
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 · 1484 阅读 · 0 评论 -
JavaScript内置对象 Global 和 Math
一,Global Global 对象是一种兜底对象,代码不会显示的访问它,它所针对的是不属于任何对象的属性和方法,不存在全局变量和全局函数,在全局作用域中定义的变量和函数都会变成Global对象的属性,isNaN(),isFinish(),parseInt(),parseFloat()都是Global对象的方法,还有其他一些方法:1,URL编码方法: encodeURI():用于对整个URI进行编码,不会编码属于URL组件的特殊字符; encodeURIComponent()...原创 2021-02-24 21:42:44 · 236 阅读 · 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 · 266 阅读 · 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 · 3376 阅读 · 2 评论 -
JavaScript垃圾回收机制:如何减少JavaScript中的垃圾回收?
一,垃圾回收释义:垃圾回收基本思路:确定那个变量不会再使用,然后释放它占用的内存。这个过程是周期性的,即垃圾回收程序每隔一定时间就会自动运行。垃圾回收程序必须跟踪记录那个变量还在使用,以及那个变量不会再使用,以便回收内存,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃;var n = 'java';var c = 'c++';var n = c;//重写nconsole.log(n);//'c++' 代码运行之后,“java”这个字符串失去了引用,系原创 2020-12-05 18:27:13 · 759 阅读 · 0 评论 -
JavaScript执行上下文:理解执行上下文
一,执行上下文: 变量或函数的上下文决定了它们可以访问那些数据,以及他们的行为,每个上下文都有一个关联的变量对象,而这个上下文中定义的所有变量和函数都存在于这个对象中上。虽然无法通过代码访问变量对象,但后台处理数据会用到它;在浏览器中,全局上下文是我们常说的window对象,因此所有通过var定义的变量和函数都会成为window对象的属性和方法,使用let和const的顶级声明,不会定义在全局上下文中,但在作用域链解析上效果是一样的。上下文在其所有代码执行完毕后会被销毁,包括定义在它上面的所有变量.原创 2020-11-29 19:27:40 · 298 阅读 · 0 评论 -
JavaScript变量:你知道原始值和引用值的区别吗
一,变量: (1)定义基本类型的值和引用类型的值方式类似,创建一个变量并为其赋值,但是当这个值保存在变量中后,对不同各类型值可以执行的操作则大相径庭,对于引用类型的值,可以为其添加属性和方法,也可以改变和删除其属性和方法,示例如下: 以下代码创建了一个对象并将其保存在了变量p中,为该对象添加了一个名为name的属性,并将字符串 'java' 付给了这个属性,又通过console.log()访问了这个属性。如果对象不被销毁或者这个属性不被删除,这个属性将一直存在;var p = new...原创 2020-11-28 21:11:08 · 224 阅读 · 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 · 968 阅读 · 0 评论 -
JavaScript类型:数据类型
一,数据类型: 基本数据类型:Undefined Null Boolean String Number Symbol 引用数据类型: Object typeof 操作符用来检测给定变量的数据类型1,Undefined: Undefined 表示未定义,即在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined,只有一个值,类型就是Undefined类型; 例如:下面案例只声明了msg,并没有对其...原创 2020-11-14 20:57:35 · 218 阅读 · 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 · 235 阅读 · 0 评论 -
JavaScript运动框架
说明:1,单定时器会存在问题,需要给每个元素加入定时器(关闭和打开定时器都互不干扰);2,多物体运动框架中,所有东西都不能共用,把定义的变量作为属性加到元素身上;3,offsetWidth或offsetHeight等获取的是盒模型的尺寸,需要考虑padding border等,获取样式方式由offset变为 obj.style['width']方式;4,封装获取样式的js函数get...原创 2019-05-27 20:34:28 · 165 阅读 · 0 评论 -
JavaScript 实现多物体运动,解决单定时器,存在问题
存在问题及解决方式:单定时器,存在问题:原因:当执行startMove函数的时候,需要把上一个定时器关闭,整个程序就一个定时器,第一个div正在执行,第二个也随着执行,前一个定时器就会被删除;解决方式:分别给每个div增加定时器;demo:<!DOCTYPE html><html lang="en"><head> <me...原创 2019-05-05 18:10:02 · 252 阅读 · 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 · 1625 阅读 · 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 · 133 阅读 · 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 · 418 阅读 · 0 评论 -
JavaScript运动之缓冲运动
1,当物体和终点的距离远,速度越大,当距离不断减小,速度不断减小,速度和距离成正比;速度=(目标值-物体当前位置值)/缩放系数2,speed速度不能为小数,当speed(速度)>0或者<0 时 需要向上取整(Math.ceil)或者向下取整(Math.floor);3,缓冲运动的停止条件:两点重合(即运动物体和目的地重合)DOME:<!DOCTYPE html>...原创 2019-05-03 17:59:51 · 339 阅读 · 0 评论 -
JavaScript encodeURIComponent()函数
定义和用法encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。其他字符(比如 :;/?原创 2019-04-23 16:29:31 · 442 阅读 · 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 · 3904 阅读 · 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 · 2844 阅读 · 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 · 324 阅读 · 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 · 433 阅读 · 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 · 114 阅读 · 1 评论 -
ES6模块的import和export用法总结
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。...转载 2018-11-13 18:34:17 · 1481 阅读 · 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 · 4153 阅读 · 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 · 571 阅读 · 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 · 2195 阅读 · 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 · 728 阅读 · 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 · 3888 阅读 · 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 · 430 阅读 · 0 评论 -
JS操作DOM事件总结
Js中的事件行为,结构,样式分离的页面一般事件 onclick 鼠标点击时触发此事件ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件onmouseout 当鼠标离开某对象范围时触发此事件...原创 2019-02-25 20:28:06 · 469 阅读 · 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 · 4650 阅读 · 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 · 1032 阅读 · 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 · 1516 阅读 · 1 评论