js

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

用原生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…

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

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 = ['零',…

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

揭秘箭头函数
英文地址: https://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3 通过掘金翻译计划活动进行翻译
箭头函数是函数表达式的替代方法,但在语法上有所不同…
js奇怪的知识--console.table
这个属性对我来说还真有些陌生,无意中发现的,查询过 MDN 之后听得挺有意思的,就记录一下。 根据字面意思就是 “将数据以表格的形式显示”。这个方法需要一个必须参数 data,data 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns。
表格的第一列是…
通过 getTimezoneOffset() 方法判断当前时区是否为夏令时
getTimezoneOffset() 方法 方法返回 UTC 时间和本地时间之间的时差,以分钟为单位。 世界协调时间 (UTC) 是世界时间标准设定的时间,UTC 时间与 GMT 时间(格林威治时间)相同。
测一下我所在时区和标准时区的时间差
Copy
function…
使用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…
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 的题目,虽然不难但是考察细节…