羞羞的王大锤

羞羞的王大锤 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

慌慌张张,匆匆忙忙

个人动态

羞羞的王大锤 赞了回答 · 2020-11-08

解决js怎么处理YYYY-MM-DDTHH:mm:ss.sssZ类型的时间字符串

2016-09-18T08:01:01.000+0000 这种格式应该是 RFC 3339 中定义的。关于时区的部分,参考 RFC 2822

从 RFC 2822 中可以看到 +0000 是合法的,不知道为啥 Safari 不支持。

这事儿既然不能怪后端,那就做个兼容处理吧,对于 Safari,加个冒号进去

const s = "2016-09-19T09:05:07.870+0000";
s.replace(/(\+\d{2})(\d{2})$/, "$1:$2");
const d = new Date(s);
// 或 new Date(Date.parse(s));

关注 12 回答 10

羞羞的王大锤 赞了问题 · 2020-11-08

解决js怎么处理YYYY-MM-DDTHH:mm:ss.sssZ类型的时间字符串

后台传过来的时间字符串是 YYYY-MM-DDTHH:mm:ss.sssZ 格式的
在js中需要对其格式化
直接使用new Date(xxx)的话,安卓没有问题,ios报Date不合法

我知道对于普通的日期,如2016-09-19,使用new Date(xxx)的话,只需要将2016-09-19改为2016/09/19就行,这样ios和安卓都没问题

但是对于题中所说的格式,-改成/,都没用了,所以这种格式的怎么处理呢?如 2016-09-18T08:01:01.000+0000

关注 12 回答 10

羞羞的王大锤 收藏了问题 · 2020-11-08

js怎么处理YYYY-MM-DDTHH:mm:ss.sssZ类型的时间字符串

后台传过来的时间字符串是 YYYY-MM-DDTHH:mm:ss.sssZ 格式的
在js中需要对其格式化
直接使用new Date(xxx)的话,安卓没有问题,ios报Date不合法

我知道对于普通的日期,如2016-09-19,使用new Date(xxx)的话,只需要将2016-09-19改为2016/09/19就行,这样ios和安卓都没问题

但是对于题中所说的格式,-改成/,都没用了,所以这种格式的怎么处理呢?如 2016-09-18T08:01:01.000+0000

羞羞的王大锤 发布了文章 · 2020-04-18

SASS实现DIV扁平化长阴影的美丽效果

现如今扁平化设计风格相当流行,各种地方都可以看到它的身影,而长阴影(Long Shadow)是扁平化设计中的一个重要的概念,那长阴影到底是什么意思呢?往下看

长阴影

长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常采用角度为 45 度的投影,给对象添加了一份立体感。长阴影快速发展为流行的设计趋势,并经常被应用到扁平设计方案的对象。想这样:


今天我们就用SASS实现类似的长阴影的效果

我们拿一个登录页面作为例子,添加前是这样的

实现方法

为实现长阴影的效果我们先需要创建一个函数

/*
* 长阴影实现函数:longshadow
* $color:颜色值
* $opacity:透明度
* $stepnum:投影长度
* $stepLength:渐变步长 默认为1
*/
@function longshadow($color,$opacity,$stepnum, $stepLength:1 ){

  $gradient_steps: null;
  // 计算步数
  $steps:floor( $stepnum / $stepLength);
  
  @for $i from 0 through $steps {
    // 设置透明度
    $op: $opacity - $i / $steps ;
    // 设置颜色
    $colour_mix: rgba($color, $op);

    $seperator: null;
    // 添加连接用的逗号
    @if($i != $steps){
      $seperator: #{','};
    }
    // 拼接box-shadow语句,例:1px 1px rgba(0,0,0,1),……
    $gradient_steps: append( #{$gradient_steps}, #{$i * $stepLength }px #{$i * $stepLength }px $colour_mix $seperator );

  }
  // 拼接好的语句返回
  @return $gradient_steps;

}

创建好函数后,我们为登录框设置box-shadow属性,并调用上面的方法

.rg {
  background: #fff;
  text-align: center;
  border-radius: 5px;
  padding:20px;
//调用方法 
  box-shadow:longshadow(#dbe3f5,.5,300);
}

这样一个简单的长阴影的效果的效果就出来了

我们可以传入不同的颜色、透明度,阴影的长度一级渐变的步长

  box-shadow:longshadow(rgb(203, 203, 203),.5,300,20);

效果是这样的

最后 🙌

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞👍哦,阿门~

查看原文

赞 0 收藏 0 评论 0

羞羞的王大锤 发布了文章 · 2020-04-04

CSS3教你把页面变成悲伤的黑白- 4月4日悼念那些逝去的英雄们

2020年4月4日举行了全国性哀悼活动,缅怀那些在对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞,愿逝者安息

我们看到这一天很多网站突然就变成了黑白色,像这样:

那他们是怎么实现的呢?这就离不开CSS3中的filter(滤镜) 属性啦

filter

filter是css3中的一个新属性,它可以给我们的页面元素添加各种各样的滤镜,而使我们的图像变成灰色的是使用到了filter 中的grayscale函数,具体设置:

filter:grayscale(100%)  

如果我们只想把图片变成灰色,这样设置:

img{
  filter:grayscale(100%)  
}

如果我们想把这个网站都变成灰色我们只需要设置:

html{
  filter:grayscale(100%)  
}

filter兼容性


filter属性IE无法支持,其他浏览器均可支持,为了更好的兼容性,我们需要设置为:

html{
    -webkit-filter: grayscale(100%); /* 老版本的Chrome, Safari, Opera */
    -moz-filter: grayscale(100%);/* 老版本的Firefox */
    filter: grayscale(100%);
    filter: grayscale(1);
}

这样就实现了黑白效果哦~

最后 🙌

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞👍哦,阿门~

查看原文

赞 0 收藏 0 评论 0

羞羞的王大锤 发布了文章 · 2020-03-13

JS中拜访Set、Map两兄弟

今天主要谈谈ES6中新增加的两个数据结构,一个是Set一个是Map
他们到底是什么意思呢?
粗略的说Set是特殊的数组;Map是增强版的对象
下面我们就来认识一下这哥俩

Set

Set它类似于数组,只是这个数组里的值都是唯一的,没有重复!

const s = new Set([1,1,2,2])
[...s] //[1,2]
Set?:想在我这儿浑水摸鱼,人云亦云、滥竽充数,不能gou!你必须是独一无二的那一个!

Set用途

它一般被用来去除数组中重复的成员、取并集、交集、差集,因为真的很方便

去重

const s = new Set([1,1,2,2])
[...s] //[1,2]

取并集

let s1 = new Set([1,2])
let s2 = new Set([2,3])
let union = new Set([...s1,...s2])
union // Set {1,2,3}

取交集

let s1 = new Set([1,2]);
let s2 = new Set([2,3]);
let intersect = new Set([...s1].filter(x =>s2.has(x)))
intersect // Set {2}

取差集

let s1 = new Set([1,2]);
let s2 = new Set([2,3]);
let difference = new Set([...s1].filter(x =>!s2.has(x)))
difference // Set {1,3}

Map

Map它类似于对象,也是键值对的集合,但是"键"的范围不局限于字符串啦,各种类型的值包括对象都可以当它的键,可以说Map是一个增强版的对象

// 常规字符串作为键
// 对象的定义
const obj = {}
obj.name = 'chuichui'
obj //{name: "chuichui"}
// Map的定义
const map = new Map()
map.name = 'chuichui'
map //Map {name: "chuichui"}

Map中的键还可以是一个数组,只要你想到的都可以!

const map = new Map()
const arr = [1,2,3]
map.set(arr,1)
map.get(arr) // 1
Map?:我的键包罗万象,任何类型的数据都没问题,尽管放马过来,对象能干的事儿我都能干,他干不了的事儿,我也能干!

最后 ?

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞?哦,阿门~

查看原文

赞 1 收藏 1 评论 0

羞羞的王大锤 发布了文章 · 2020-03-12

JS中“无我”的=>箭头函数?

在ES6中,允许使用“箭头”(=>)定义函数
首先我们来看看它是怎么定义函数的

定义函数

var sum = (num1,num2) => num1 + num2;
//相当于
var sum = function(num1,num2){
     return num1 + num2;
} ;

哦哦,原来箭头函数是定义函数的一种简化方法,它省去了function、return这样的单调乏味且罗里吧嗦的关键字,使代码一下子变得很清爽

  • 注意

如果箭头函数代码块里面不至一条语句时,需要用大括号把它们包起来,并使用return返回

那箭头函数的作用就这点吗?远远不是

箭头函数解决了this绑定问题

这才是箭头函数的灵魂所在,我们先来看个例子

var man = {
    name:'chuichui',
    sing:function(){
        setTimeout(function(){console.log(this.name,'is singing');},100)      
    }
}
var name= 'wangcai';
man.sing(); // "wangcai is singing"

在setTimeout中延迟执行,怎么就变成了旺财在唱歌呢?
这里面其实都是this搞得鬼
原来setTimeout中所执行函数中的this,指向全局对象 而全局对象中name变量的值为"wangcai"
如果变成箭头函数,情况就有点不一样了

var man = {
    name:'chuichui',
    sing:function(){
        setTimeout(() =>{console.log(this.name,'is singing');},100)      
    }
}
var name= 'wangcai';
man.sing(); // "chuichui is singing"

这是因为普通函数this指向运行时所在的作用域,第一个例子中作用域是(全局对象);箭头函数中的this绑定了定义时所在的作用域,第二个例子中作用域是sing函数,这样使箭头函数可以让this指向固定化**

实质

this指向固定化其实并不是箭头函数内部有绑定this机制,实际上箭头函数根本没有自己的this,这样导致内部的this就是外部代码的this,这样就实现了固定化

感受?

果然无招胜有招,“无我”才是最高境界,箭头兄,

最后 ?

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞?哦,阿门~

查看原文

赞 2 收藏 1 评论 0

羞羞的王大锤 发布了文章 · 2020-03-11

JS中三个点(...)是什么鬼?

我们在看js代码时经常会出现(...)三个点的东西,它究竟是什么意思?又有何用处?
下面我就给大家分享一下三个点的那些事

什么意思?

三个点(...)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开

字面量一般指[1,2,3]或者{name:'chuichui'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了

说白了就是把衣服脱了,不管是大括号([])、花括号({}),统统不在话下,全部脱掉脱掉!

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//对象
var man = {name:'chuichui',height:176}
console.log({...man}) / {name:'chuichui',height:176}

有什么用?

它的用处很广泛,我们随处都可以看到,下面是几个常见的例子

复制用它

//数组的复制
var arr1 = ['hello']
var arr2 =[...arr1]
arr2 // ['hello']
//对象的复制
var obj1 = {name:'chuichui'}
var obj2 ={...arr}
ob12 //  {name:'chuichui'}

合并用它

//数组的合并
var arr1 = ['hello']
var arr2 =['chuichui']
var mergeArr = [...arr1,...arr2]
mergeArr  // ['hello','chuichui']
// 对象分合并
var obj1 = {name:'chuichui'}
var obj2 = {height:176}
var mergeObj = {...obj1,...obj2}
mergeObj // {name: "chuichui", height: 176}

字符转数组用它

var arr1 = [...'hello']
arr1 // ["h", "e", "l", "l", "o"]

函数传参用它

可以和正常的函数相结合,灵活使用

function f(v,w,x,y,z){ }
var args = [2,3]
f(1,...args,4,...[5])

当我们想把数组中的元素迭代为函数参数时,用它!

function f(x,y,z){}
var args = [1,2,3]
f(...args)

// 以前的方法
f.apply(null,args);

感受🤛

用了三个点感觉一切都可以省略,一切尽在不言中,你慢慢品☕️

最后 🙌

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞👍哦,阿门~

查看原文

赞 6 收藏 1 评论 0

羞羞的王大锤 发布了文章 · 2020-03-09

你还只会用indexOf?

我们一般判断字符串里是否包含某个子串时,会用到indexOf方法,如果找到一个子串,则返回 子串第一次出现的位置。如果没有找到则返回 -1

var name ='chuichui'
name.indexOf('chui')   // 0 
name.indexOf('gg')  // -1

今天我给大家介绍几个ES6中 新添加的方法,来判断字符串是否包含某个子串。

includes

  • includes() 返回一个布尔值,表示是否找到了参数字符串
var name ='chuichui'
name.includes('chui')   // true
name.includes('gg')  // false

startsWith()

  • startsWith() 返回一个布尔值,表示参处字符串是否在源字符串的头部
var name ='chuichui'
name.startsWith('chui')   // true
name.startsWith('ui')  // false

endWith()

  • endWith() 返回一个布尔值,表示参处字符串是否在源字符串的尾部
var name ='chuichui'
name.endWith('chui')   // true
name.endWith('ui')  // true
name.endWith('ch')  // false

补充

上面说的这三种方法,都支持第二个参数,表示开始搜索的位置

var name ='chuichui'
// 4表示从第五字符开始搜索(下标从0️⃣开始)
name.includes('chui',4)   // true  
name.startWith('ch',4)  // true
name.endWith('ui',4)  // true

友情提示?

在以后遇到判断字符串里是否包含某个子串时,你不在只能单单使用indexOf,includes、startsWith、endWith也是不错的选择哦

最后 ?

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞?哦,阿门~

查看原文

赞 0 收藏 0 评论 0

羞羞的王大锤 发布了文章 · 2020-03-08

Ant Design Pro离线使用以及在MacOS与Windows迁移过程中遇到的坑

离线使用遇到的坑

因为项目要求,需要在离线状态下开发,我们用的Antd Pro 脚手架,开箱即用,谁用谁知道。在迁移过程中,我们将工程文件直接拷过去,But,在离线状态下无法使用!,错误显示无法加载到一些依赖,不对啊,我明明把node_modules整个文件夹都拷过去了
于是各种度娘,折腾了很长时间,终于找到的原因竟然是它!!
我使用的cnpm 安装的包依赖!
npm下载速度很慢,很多时候为了方便我们会使用cnpm安装依赖,在联网环境看不出区别,但是在离线状态下立马暴露出了问题,其实cnpm 安装依赖时并没有全部将依赖下载到本地,而是一些文件的超链接!,所以在离线状态下无法加载到依赖,因而会报错

解决办法

老老实实使用npm 安装依赖,虽然时间很长,但忍了!!你可以用这段这个时间喝喝茶、泡泡脚……好好享受一下生活

MacOS与Windows迁移过程遇到的坑

开发一开始在MacOS上,后来要迁移到Windows上继续开发,我也是直接将MacOS下的工程文件直接拷到Windows的机器上,但是项目无法启动,错误显示无法加载到一些依赖!不对啊,这个我用的npm安装的依赖,没道理啊,应该妥妥没问题啊
于是各种度娘,最终解决了...

解决方法

将node_modules文件删除掉,然后在Windows上重新npm install,两个操作系统存在差异,直接复制过去使用,有时候会出现出错

友情提示?

人生就像一场戏,因为有缘来相聚,为了小事发脾气,回头想想又何必……坑坑更健康?

最后 ?

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞?哦,阿门~

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 15 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-30
个人主页被 669 人浏览