高嘉君的个人博客

  • 首页

  • 关于

  • 归档

JS计算某个日期至今天的天数

发表于 2017-11-13 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 950 | 阅读时长 ≈ 1 分钟

兼容IE8

1
2
3
4
5
6
7
8
9
10
11
12
13
// time格式为 '2018-08-01或2018/08/01或2018/8/1'
var daysComputed = function(time) {
var oldTimeFormat = new Date(time.replace(/-/g, '/'));
var nowDate = new Date();
if(nowDate.getTime() - oldTimeFormat.getTime() > 0) {
var times = nowDate.getTime() - oldTimeFormat.getTime();
var days = parseInt(times / (60*60*24*1000));
return days;
} else {
throw('传入时间不能大于当前日期');
}
}
daysComputed('2017-11-1');

兼容现代浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
// time格式为 '2018-08-01或2018/08/01或2018/8/1'
const daysComputed = time => {
let oldTimeFormat = new Date(time)
let nowDate = new Date()
if(nowDate.getTime() - oldTimeFormat.getTime() > 0) {
let times = nowDate.getTime() - oldTimeFormat.getTime()
let days = parseInt(times / (60*60*24*1000))
return days
} else {
throw('传入时间不能大于当前日期')
}
}
daysComputed('2017-11-1')

《CSS揭秘》读书笔记

发表于 2017-03-21 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 4.3k | 阅读时长 ≈ 4 分钟

本文旨在记录《CSS揭秘》这本书中出现的CSS经典技巧

1.半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明的边框,我们最初的尝试可能是这样的:

1
2
border: 10px solid hsla(0, 0%, 100%, .5);
background: #fff;

除非你对背景和边框的工作原理非常地熟悉,否则展示出来的结果可能让你摸不着头脑,因为我们的背景会从它的半透明边框透上来。如下图所示:

阅读全文 »

函数节流 & 函数去抖

发表于 2017-03-03 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 2.2k | 阅读时长 ≈ 2 分钟

函数去抖

浏览器中某些计算和处理要比其他的昂贵的多。例如,DOM操作比起非DOM交互需要更多的内存和cpu时间。连续尝试进行过多的DOM相关操作可能导致浏览器挂起甚至崩溃。尤其是IE中使用onresize事件处理程序的时候容易发生,当调整浏览器大小时,该事件便会频繁触发。在onresize事件处理程序内部如果尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃。为了绕开这个问题,你可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复进行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它将清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换成一个新的计时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

阅读全文 »

vue-cli生产环境部署

发表于 2016-12-16 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 867 | 阅读时长 ≈ 1 分钟

站点根目录部署

  1. 执行npm run build
  2. 找到dist目录,把里面的文件直接丢到站点根目录下即可

站点子目录部署

  1. 修改config/index.js
1
2
3
4
5
6
7
8
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 修改这里,防止报404错误
productionSourceMap: true
阅读全文 »

CSS3特效收集

发表于 2016-12-15 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 425 | 阅读时长 ≈ 1 分钟

文字空心效果

See the Pen mOQMKZ by abcdGJJ (@abcdGJJ) on CodePen.

阅读全文 »

jquery事件绑定函数bind.lived.elegate.on区别

发表于 2016-11-13 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 1.3k | 阅读时长 ≈ 1 分钟

考虑如下html片段

1
2
3
4
5
6
<ul id="members">
<li>
<a href="a.html">点击一下有惊喜</a>
<a href="b.html">还真点啊</a>
</li>
</ul>

使用bind方法

bind()方法直接在DOM元素中注册事件类型和事件处理函数。虽然它对浏览器的兼容性很好,但是却有很大的性能问题。

1
2
3
4
5
6
7
$("#members li a").bind( "click", function(e) {
console.log(e)
})
// 或
$("#members li a").click(function(e) {
console.log(e)
})

bind()方法会匹配所有符合条件的元素附加上事件处理程序,这样做很浪费时间,因为绑定的都是同一个事件处理函数。类似于在原生JS中给每个<li>绑定onclick事件。

阅读全文 »

yarn常用命令

发表于 2016-11-10 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 226 | 阅读时长 ≈ 1 分钟

yarn / yarn install === npm install
yarn add xxx === npm install xxx –save
yarn add xxx –dev === npm install xxx –save-dev
yarn remove xxx === npm uninstall xxx
yarn upgrade === npm update
yarn global add xxx === npm install xxx -g

Git基本操作

发表于 2016-11-07 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 507 | 阅读时长 ≈ 1 分钟

版本移动

回退到上个版本

git reset –hard HEAD^

前进到之后版本(可以找到commit id)

git reset –hard [commit id]

前进到之后版本(找不到commit id)

git reflog
git reset –hard [commit id]

阅读全文 »

vue 跨域问题解决办法

发表于 2016-10-18 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 608 | 阅读时长 ≈ 1 分钟

在使用vue-resource时,如果想要调用一个第三方的api,往往直接调用是不行的。控制台会提示No Access To …,翻译成中文意思就是请求的资源不允许跨域。

那么有什么办法来调用呢?笔者在网上找到了两种方法,原理基本都是代理转发:

使用proxyTable

如果你是使用vue-cli来构建的模板,进入config/index.js,修改proxyTable为:

1
2
3
4
5
6
7
8
9
proxyTable: {
'/test': {
target: 'http://news-at.zhihu.com/api/4/news',
changeOrigin: true,
pathRewrite: {
'^/test': '/latest'
}
}
}
阅读全文 »

JavaScript中创建对象的7中模式

发表于 2016-10-07 | 更新于 2018-08-25 | 分类于 技术分享 | 阅读次数:
本文字数: 9.2k | 阅读时长 ≈ 8 分钟

作者:旗smile
原文地址:http://blog.csdn.net/u014346301/article/details/52204967

ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说明对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数。

创建自定义对象最简单的方式就是创建一个Object的实例,然后再为他添加属性和方法,如下所示:

1
2
3
4
5
6
7
var person = new Object();
person.name = "liubei";
person.age = 29;
person.job = "shayemuyou";
person.sayName = function(){
alert(this.name);
}

上面的例子创建了一个名为person的对象,并为他添加了三个属性和一个方法。其中sayName()方法用于显示name属性,this.name将被解析为person.name,早期的开发人员经常使用这个模式来创建对象,后来对象字面量的方法成了创建对象的首选模式,上面的例子用对象字面量的语法可以写成如下这样:

阅读全文 »
123…7
abcdGJJ

abcdGJJ

这里是高嘉君的个人博客

65 日志
3 分类
53 标签
Links
  • PP_K’s Blog
  • 胡方运的博客
  • 刘熹的博客
  • 万事静心
  • 雁南之北
  • vi my.cnf
  • 绿岛之美
  • 小马姑娘
  • 技术源码分享
  • summerpro
  • 帝果
  • 猎豹园地
  • 助梦者的博客
  • FMW哈哈哈
  • 路人甲
© 2019 abcdGJJ | 站点总字数: 125k | 站点阅读时长 ≈ 1:54
由 Hexo 强力驱动|鲁ICP备15017412号-1
|
主题 – NexT.Pisces
cdn提供商:又拍云 又拍云logo