jQuery/原生JS 监听图片加载完成/加载失败 事件 作者: Chuwen 时间: 2020-01-28 分类: JQuery 评论 # 假设有以下 HTML 代码 ``` <img id="img" src="./logo.png" alt="这是图片简介"/> ``` # jQuery 版： ## jQuery 监听图片加载完成事件 ``` $("#img").on("load", function(){ console.log("图片加载完成了"); }); ``` ## jQuery 监听图片加载失败事件 ``` $("#img").on("error", function(){ console.log("图片加载失败"); }); ``` ## jQuery 监听图片加载完成/加载失败事件 简化版代码 ``` $("#img").on("load", function(){ console.log("图片加载完成了"); }).on("error", function(){ console.log("图片加载失败"); }); ``` --- # 原生 JavaScript 版： ``` var img_selector = document.querySelector("img");//查询 id 为 img 的节点 //监听图片加载完成事件 img_selector.addEventListener("load", function(){ console.log("图片加载完成事件"); }); //监听图片加载失败事件 img_selector.addEventListener("error", function(){ console.log("图片加载失败事件"); }); ``` ## 简化版代码 ``` var img_selector = document.querySelector("img");//查询 id 为 img 的节点 //监听图片加载完成事件 img_selector.onload = function(){ console.log("图片加载完成事件"); }; //监听图片加载失败事件 img_selector.onerror = function(){ console.log("图片加载失败事件"); }; ```
纯 CSS 实现的 时间线，也支持使用 JavaScript 动态生成 作者: Chuwen 时间: 2020-01-11 分类: HTML5,JavaScript 4 条评论 # Time-line 纯 CSS 实现的 时间线，也支持使用 JavaScript 生成。 [DEMO | 演示](https://nowtime.cc/time-line.html) ![Time-line 预览图][1] # HTML 渲染 你只需要根据 `timeLine.html` 代码结构进行简单的修改即可实现 # JacaScript 渲染 你需要将 [timeLine.html](https://github.com/PrintNow/TimeLine/blob/master/timeLine.html#L103) `103 行` 取消注释，然后根据 [timeLine.js](https://github.com/PrintNow/TimeLine/blob/master/timeLine.js) 注释修改 ## timeLine.js 里 `data变量` 数据格式如下： ``` [ { "title":"现在网", "link":"https://nowtime.cc", "time":"1578718860" }, { "title":"ffmpeg 使用方法合集", "link":"https://nowtime.cc/software/834.html", "time":"1578725484" } ] ``` > 字段解释： >> `title` 时间线显示的内容 >> `link` 点击后跳转的链接 >> `time` 该内容发布的时间，注意是 **秒级时间戳** ！ # 鸣谢 > 部分 CSS 样式参考的是 https://www.ihewro.com/archives.html # LICENSE [MIT LICENSE](https://github.com/PrintNow/TimeLine/blob/master/LICENSE) [1]: https://cdn.nowtime.cc/2020/01/11/4225051700.png
JavaScript 遍历 document.querySelectorAll() 作者: Chuwen 时间: 2019-11-20 分类: JavaScript 评论 # 如果使用 `forEach` 遍历，则会报错，因为它返回的不是一个数组，而是 `NodeList` ``` document.querySelectorAll('input[type='selece']]').forEach(function() { }); ``` 我们可以通过一下方法来遍历 ``` const selects = document.querySelectorAll("input[name='select']"); [].forEach.call(selects, function(select) { console.log(select); }); ```
JavaScript 随机产生不重复的数字思路(递归法) 作者: Chuwen 时间: 2019-10-22 分类: JavaScript 评论 # 代码 ```javascript /** * 产生指定长度 ０～11的数字，且不重复数字的数组，使用了递归方法 * @author chuwen <wenzhouchan@gmail.com> * @link https://NowTime.cc * @param length 指定生成数组的长度，默认为５ * @param arr 默认空白数组，不需要填写 * @returns {Array} 输出数组 */ function random_num(length=5, arr=[]) { let random = Math.floor(Math.random()*11)+1, repeat = false; random = random > 9 ? random.toString() : '0'+random;//将数字转化成字符串。如果小于９，给数字前面补一个零 if(arr.length > length-1) return arr;//达到了指定数组长度，直接输出数组 for(let item in arr){ if(arr[item] === random) return random_num(length, arr);//如果数组中存在与本次随机产生的随机数有相同的，就递归调用 } arr.push(random);//将产生的随机数，追加进 arr return random_num(length, arr);//然后进行递归调用 } ``` ＃ 运行结果 ``` console.log(random_num(５));//运行结果如下 ["02", "04", "06", "10", "01"] console.log(random_num(４));//运行结果如下 ["03", "10", "08", "06"] ```
JavaScript 动态取对象值(数组) 作者: Chuwen 时间: 2019-09-28 分类: JavaScript 评论 # 举个例子 有以下对象 ``` let ob = { age: 19, name: 'Wenzhou Chan', sex: '♂' }; let key = 'age';//键名(key)，根据自己业务逻辑，该值是动态改变的 //按照预想结果，取出来的应该是 ob.age 的值 console.log(ob.key); //但运行结果实际是 undefined //我们可以这样做，就可以动态取值了 console.log(ob[key]); //运行结果是 19 ```