js代码 | 易学教程

js实现打字效果

阅读更多关于 js实现打字效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>js typing</title> 6 </head> 7 <body> 8 <div id='divTyping'></div> 9 <script> 10 var str = 'js 实现的打字效果，感觉蛮有趣的。'; 11 var i = 0; 12 function typing(){ 13 var divTyping = document.getElementById('divTyping'); 14 if (i <= str.length) { 15 divTyping.innerHTML = str.slice(0, i++) + '_'; 16 setTimeout('typing()', 200);//递归调用 17 } 18 else{ 19 divTyping.innerHTML = str;//结束打字,移除 _ 光标 20 } 21 } 22 typing(); 23 </script> 24 </body> 25 </html> 代码很容易懂，原来也没有想象的那么难来源： https://www.cnblogs.com/2YSP/p/9239817.html

动态加载JS代码

阅读更多关于动态加载JS代码

　　到处查资料研究js动态脚本的加载，找到以下7种方法，总有一种适合你！　　首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下： function functionOne(){ alert("成功加载"); } 　　后面的html文件都创建在同一个目录下。方法一：直接document.write 　　在同一个文件夹下面创建一个function1.html，代码如下： <html> <head> <title></title> <script type="text/javascript"> function init() { //加载js脚本 document.write("<script src='package.js'><\/script>"); //加载一个按钮 document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>"); //如果马上使用会找不到，因为还没有加载进来，此处会报错 functionOne(); } function operation() { //可以运行，显示“成功加载” functionOne(); } </script> </head>

js渐变颜色、背景、边框

阅读更多关于 js渐变颜色、背景、边框

我的闪烁文字 abc123 我的闪烁文字 abc123 边框代码： <div id="div1">我的闪烁文字 abc123</div><div id="div2">我的闪烁文字 abc123</div><div id="div3" style="height:200px; width:200px; border:solid 5px black;">边框</div><script type="text/javascript">function blink(strId, strEnd, strBegin, speed, styleName){ strBegin = strBegin || '#000000'; speed = speed || 100; styleName = styleName || 'color'; //获取当前颜色分量值 var getCur = function(beginValue, endValue, curValue, bo, rateValue) { if(beginValue == endValue) { return beginValue; } rateValue = beginValue < endValue ? rateValue : -rateValue; curValue += bo ? rateValue : -rateValue; /

JS 优雅指南 1

阅读更多关于 JS 优雅指南 1

1. 优先使用 const。 const 在 JavaScript 中不仅可以用于命名常量，因为其用于保证内存地址不可变，所以也常用于声明对象与数组。在编程中多使用 const 代替 let，可以在风格上向 immutable 靠拢，在编程思维上开始摈弃副作用。更多的使用 const 虽然可能使声明项增多，但对于开发者来说，更少的心智负担和语义化命名会使代码质量大大上升。在 JS 中如果过多的使用 let 声明变量，阅读者往往需要贯穿上下文反复阅读才能理解当前变量的值，且变量可能被其他函数引用更改，显而易见，使用变量越多理解的成本也就越高，而且你很难追踪变量具体的值。如下方代码统计数组每个值的总和。使用 const 命名一个常量后，你将无法使用 forEach 在每一次循环时改动它，转而使用 reduce，我们减少了变量 count，增加了常量 count，在随后代码的引用中就无需担忧变量的状态，因为我们知道，count 只能是一个数值，而不会变化。 // bad let count = 0 [...].forEach(item => { count += item }) // good const count = [...].reduce((pre, current) => pre + current, 0) 2. 使用函数表达式优于函数声明配合上文所提到的

JS原生方法实现jQuery的ready()

阅读更多关于 JS原生方法实现jQuery的ready()

浏览器加载页面的顺序： 1、解析HTML结构 2、加载外部脚本和样式表文件 3、解析并执行脚本代码 4、构造HTML DOM模型==ready() 5、加载图片等组件 6、页面加载完毕==onload() ready事件是在DOM模型构造完毕时触发 load事件是在页面加载完毕后触发 function ready(fn) { if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { //注销事件, 避免反复触发 document.removeEventListener('DOMContentLoaded', arguments.callee, false); fn(); //执行函数 }, false); } else if (document.attachEvent) { //IE document.attachEvent('onreadystatechange', function () { if (document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函数执行 } }); } };

JS原生方法实现jQuery的ready()

阅读更多关于 JS原生方法实现jQuery的ready()

浏览器加载页面的顺序： 1、解析HTML结构 2、加载外部脚本和样式表文件 3、解析并执行脚本代码 4、构造HTML DOM模型==ready() 5、加载图片等组件 6、页面加载完毕==onload() ready事件是在DOM模型构造完毕时触发 load事件是在页面加载完毕后触发 function ready(fn){ if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { //注销事件, 避免反复触发 document.removeEventListener('DOMContentLoaded',arguments.callee, false); fn(); //执行函数 }, false); }else if(document.attachEvent) { //IE document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函数执行 } }); } }; ready(

JS原生方法实现jQuery的ready()

阅读更多关于 JS原生方法实现jQuery的ready()

浏览器加载页面的顺序： 1、解析HTML结构 2、加载外部脚本和样式表文件 3、解析并执行脚本代码 4、构造HTML DOM模型==ready() 5、加载图片等组件 6、页面加载完毕==onload() ready事件是在DOM模型构造完毕时触发 load事件是在页面加载完毕后触发 function ready(fn){ if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { //注销事件, 避免反复触发 document.removeEventListener('DOMContentLoaded',arguments.callee, false); fn(); //执行函数 }, false); }else if(document.attachEvent) { //IE document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函数执行 } }); } }; ready(

CSS、JS中的相对路径引用

阅读更多关于 CSS、JS中的相对路径引用

　　初学者由于对一些比较基本的知识的把握不是很牢，所以在开发或者设计的时候，往往很容易出现一些错误或者异常现象而找不到出错的根源。记得自己刚刚java入门的时候，会出现一些很“离奇”的现象，然后一遍一遍查看自己的代码，一步一步的进行调试（当然那个时候的调试方式也只是从初学这的角度上而言的，大多是比较粗略的手段），还是发现不了哪里出了问题，这直接打击学习的积极性。甚至有时候，照着书本或者教学视频敲的实例代码也不能正常跑起来，不知道大家有没有这种悲催的感觉。　　比如说，大家在html中通常会导入一些外部的css、js文件，而其中一个比较容易被忽视的问题就是路径问题，有时候，我们在css、js中都有通过路径来引入一张图片的需求，当我们采用相对路径的时候，在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径，是以css文件所在路径为基准的，而js中的路径则是以导入此js的网页文件所在的位置为基准的。　　为了很好的说明这个问题，我们写一个简单的切换图片的js特效，刚开始的时候，我们让html有一副默认的背景图，通过css来设计，而当用户单击“切换背景图”按钮时，通过javascript代码来控制背景图的变更，效果如下：图一：更改背景图之前的效果图图二：更改背景图之后的效果图我们的文件结构是这样的： / index.html /js/ chbk.js /css

10分钟理解JS引擎的执行机制

阅读更多关于 10分钟理解JS引擎的执行机制

10分钟理解JS引擎的执行机制 javascript 阅读约 7 分钟深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 技术的出现,都跟现实世界里的应用场景密切相关的。同样的,我们就结合现实场景,来回答这三个问题 (1) JS为什么是单线程的? JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。场景描述: 那么现在有2个线程,process1 process2,由于是多线程的JS,所以他们对同一个dom,同时进行操作 process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢? 这样想,JS为什么被设计成单线程应该就容易理解了吧。 (2) JS为什么需要异步? 场景描述: 如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言

js 函数的嵌套

阅读更多关于 js 函数的嵌套

函数的嵌套：函数嵌套中不允许嵌套定义，嵌套的是调用。形参的命名：在定义函数的小括号中自定义，符合名称规则即可，一旦定义过后，在当前函数内，必须按照定义好的名称；上述代码执行流程：在比较三个数的大小时候，代码从上往下执行，当遇到定义函数ThreeNumber时条过函数定义，往下走，遇到一个叫函数调用名为ThreeNumber的，回去找跟这个名字相同的定义函数，找到后把实参的值复制给形参，然后执行ThreeNmuber函数体中的内容，返现一个叫TwoNumber调用函数然后网上找叫TwoNumber的定义函数，找到后执行里面的代码，比较完结果return结果返回给var s，执行下一步用 s跟最后一个数据c比价得出结果return给新定义的变量Three 上述代码执行过程比较复杂请仔细阅读来源： CSDN 作者： Jason–json 链接： https://blog.csdn.net/weixin_46146313/article/details/104114707

订阅 js代码