zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

js

cover

hugo纯静态编写一个字数统计脚本

早上起来的时候看到微信群中有博友分享自己的建站时间,聊着聊着说到总字数上面,这时我才发现我的网站没有统计的地方,索性就自己写一个吧,因为是静态博客,所以不涉及后端、服务器等,只用前端的方式来解决。 这里需要借助我之前的一篇文章,《用原生 js 给网站写个搜索功能》,里面有提到如何…
cover

用原生js给网站写个搜索功能

本文也算是一篇教程,可以给 hugo 网站加个搜索功能,并且实现热更新,体验感更好。 如果是其他程序,只需要按照特定的模板生成以下格式的文件即可,主要代码从 第 2 部分 开始,第一章节写的是如何用 hugo 输出文章列表 json 文件。 title 是文章标题,permali…
利用 memos 生成的在线动态列表
memos 是一个具有知识管理和社交功能的开源自托管备忘录中心。 Github 地址:https://github.com/usememos/memos 可以用它本身提供的 api,然后结合静态博客,做成一个在线的动态列表,类似于朋友圈功能。 接口 url 有固定的格式…
分享一个页面点击特效
点击页面时可以弹出随机颜色小心心,目前我的网站就使用了这个特效。 直接将下面的代码复制到引入的 js 文件中即可,不用进行其他配置。 Copy !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px…
cover

js中 [ ]+{ } 和 { }+[ ] 的区别

[ ]+{ }:一个数组加一个对象。 加法会进行隐式类型转换,规则是调用其 valueOf () 或 toString () 以取得一个非对象的值 (primitive value)。 如果两个值中的任何一个是字符串,则进行字符串串接,否则进行数字加法。[] 和 {} 的…
cover

localStorage 的相关运用

localStorage 是浏览器自带的一个属性,只读的 localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在…
将数组中多个对象的同名属性值取出合并成新数组
业务中需求的方法,接口返回一个数组,里面包含了大量的对象,具有同名的属性名,比较常见。但是需要将其中参数为 name 的属性值全部取出,合并成数组。 Copy const num = [ { id: 1, name: 'abc', }…
人民币小写转大写
一个有趣的 demo Copy this.smalltoBIG(43533534.78)); //肆仟叁佰伍拾叁万叁仟伍佰叁拾肆元柒角捌分 smalltoBIG (n) { var fraction = ['角', '分']; var digit = ['零',…
cover

浏览器收藏夹一键填写博客评论信息

先点击收藏一个页面,然后右键它,选择修改,在网址输入框复制下面的 js 代码,就可以一键填入了。 将其中的昵称,邮箱,网址修改成自己的信息。 目前支持绝大多数主流博客平台和系统,如果发现没有起作用,可以在下面代码里面修改增加一下 input 的属性。 如果你不会修改的话…
cover

揭秘箭头函数

英文地址: https://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3 通过掘金翻译计划活动进行翻译 箭头函数是函数表达式的替代方法,但在语法上有所不同…
cover
cover
cover

js奇怪的知识--console.table

这个属性对我来说还真有些陌生,无意中发现的,查询过 MDN 之后听得挺有意思的,就记录一下。 根据字面意思就是 “将数据以表格的形式显示”。这个方法需要一个必须参数 data,data 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns。 表格的第一列是…
通过 getTimezoneOffset() 方法判断当前时区是否为夏令时
getTimezoneOffset() 方法 方法返回 UTC 时间和本地时间之间的时差,以分钟为单位。 世界协调时间 (UTC) 是世界时间标准设定的时间,UTC 时间与 GMT 时间(格林威治时间)相同。 测一下我所在时区和标准时区的时间差 Copy function…
cover
cover

使用js随机生成背景颜色

先写一个简单的 html 页面出来 Copy <style> /* ... */ </style> <ul> <li>html</li> <li>css</li> <li>js</li> </ul> 通过 Math.random() 属性可以随机…
实时监听页面的变化
问题产生于需求,因为项目需要适配 pc 和移动端多套布局,所以某些元素在特定的宽度下会产生错位的现象。 如果是在 css 中,可以很好的判断,使用媒体查询可以实时检测页面的宽度,从而给予标签不同的属性。 Copy @media (max-width:768px){ ...…
用ajax请求获取数据
通过 jquery 进行 ajax 请求数据是一种较为简便的方式,我简单写了一个本地的data.json文件,然后用get请求数据,下面是部分代码 Copy // ajax 请求获取数据 function picShow(){ var str…
cover
cover

ES5 和 ES6 的区别?

一、javascript 由三部分组成 1.ECMAScript(核心) 它规定了语言的组成部分:法语,类型,语句,关键字,操作符等等。 2.DOM(文档对象模型) DOM 把整个页面映射为一个多层节点结果,开发人员可借助 DOM 提供的 API,轻松地删除、添加…
webpack 的核心概念和构建流程
1.webpack 的核心概念 entry(入口):一个可执行模块或者库的入口。定义了打包后的入口文件。 output(出口):指示 webpack 如何去输出,以及在哪里输出。 path: 打包文件存放的绝对路径 publicPath: 网站运行时的访问路径 filename…
javascript 进阶问题
Github:https://github.com/lydiahallie/javascript-questions 相当不错的一个 Github 仓库,javascript questions ,作者每周都会发布一些有关 javascript 的题目,虽然不难但是考察细节…
此部落格數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。