我的微码 on Clarity

设置input的placeholder的字体样式

Sun, 06 Jun 2021 00:00:00 +0000

设置input占位符的样式

HTML 代码：

1<input type="text" placeholder="请设置用户名">

CSS 代码：

 1input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 2 color: red;
 3}
 4input::-moz-placeholder { /* Firefox 19+ */
 5 color: red;
 6}
 7input:-ms-input-placeholder { /* IE 10+ */
 8 color: red;
 9}
10input:-moz-placeholder { /* Firefox 18- */
11 color: red;
12}

示例：

设置滚动条样式

Sun, 06 Jun 2021 00:00:00 +0000

设置滚动条样式

HTML 代码：

1<p class="scroll-container">
2 庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
3</p>

CSS 代码：

1.scroll-container {
2 width: 500px;
3 height: 150px;
4 border: 1px solid #ddd;
5 padding: 15px;
6 overflow: auto; /*必须*/
7 }

滚动条样式：

 1 .scroll-container::-webkit-scrollbar {
 2 width: 8px;
 3 background: white;
 4 }
 5
 6 .scroll-container::-webkit-scrollbar-corner,
 7 /* 滚动条角落 */
 8 .scroll-container::-webkit-scrollbar-thumb,
 9 .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/
10 border-radius: 4px;
11 }
12
13 .scroll-container::-webkit-scrollbar-corner,
14 .scroll-container::-webkit-scrollbar-track {
15 /* 滚动条轨道 */
16 background-color: rgba(180, 160, 120, 0.1);
17 box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
18 }
19
20 .scroll-container::-webkit-scrollbar-thumb {
21 /* 滚动条手柄 */
22 background-color: #00adb5;
23 }

示例：

庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。

前端创建并下载文件

Wed, 27 Jan 2021 00:00:00 +0000

more 利用 HTML5 原生的 download 属性来下载文本信息

代码如下：

 1/**
 2 * 前端创建并下载文件
 3 * @param {String} content 文件内容
 4 * @param {String} filename 文件名称
 5 * @param {String} MIME
 6 * MIME类型参考手册 http://www.w3school.com.cn/media/media_mimeref.asp
 7 */
 8export function downloadFile (content, filename, MIME = 'application/octet-stream') {
 9 // 创建隐藏的可下载链接
10 const eleLink = document.createElement('a')
11 eleLink.download = filename
12 eleLink.style.display = 'none'
13
14 // 字符内容转变成blob地址
15 const blob = new Blob([content], { type: MIME })
16 eleLink.href = URL.createObjectURL(blob)
17
18 // 触发点击事件，然后移除
19 document.body.appendChild(eleLink)
20 eleLink.click()
21 document.body.removeChild(eleLink)
22}

其中，参数 content 指需要下载的文本或字符串内容，filename 指下载到系统中的文件名称。

代码来源： JS前端创建html或json文件并浏览器导出下载

将正常时间格式转化为时间戳

Wed, 27 Jan 2021 00:00:00 +0000

使用 JavaScript 内置方法将正常时间格式转化为时间戳

 1/**
 2 * 将正常时间格式转化为时间戳
 3 * @param {String} time [正常时间格式，如：2019-04-01 13:10:10]
 4 */
 5export function getTimestamp (time = null) {
 6 // 没有对 time 做合法性校验
 7 // 假设传入的 time 都是合法的时间格式：2019-04-01 13:10:10
 8 const date = time ? new Date(time.replace(/-/g, '/')) : new Date()
 9 const timestamp = date.getTime() // 13 位数字，精确到毫秒
10 return timestamp
11}

检测设备类型

Wed, 27 Jan 2021 00:00:00 +0000

在开发移动端网站时经常需要检查用户端设备类型，以便做出不同的调整。

方式一、检测手机平板和PC

 1function detectDevice() {
 2 var isMobile = false, isTablet = false, isLaptop = false;
 3 if (window.innerWidth <= 425) {
 4 isMobile = true;
 5 isTablet = false;
 6 isLaptop = false;
 7 } else if (window.innerWidth <= 768) {
 8 isMobile = false;
 9 isTablet = true;
10 isLaptop = false;
11 } else {
12 isMobile = false;
13 isTablet = false;
14 isLaptop = true;
15 }
16}
17detectDevice();

判断是否微信浏览器

1function isWeChat () {
2 const ua = navigator.userAgent.toLowerCase()
3 return ua.match(/MicroMessenger/i) == "micromessenger"
4}

计算传入的时间戳和当前时间相差了多久

Wed, 27 Jan 2021 00:00:00 +0000

某些时候我们需要展示某个时间点相差当前时刻多久，例如“一天前”，“一个月前”等。

 1/**
 2 * 计算传入的时间戳和当前时间相差了多久
 3 * @param {Number} timestamp [时间戳]
 4 */
 5export function getTimeDiff (timestamp) {
 6 // 如果精确到毫秒，时间戳是 13 位数字
 7 // 这里按照秒来计算，需要将毫秒转换为秒
 8 if (timestamp > 1 * 10 ** 12) {
 9 timestamp = timestamp / 1000
10 }
11
12 var currentStamptime = Date.parse(new Date()) / 1000
13 var agoAt = '刚刚'
14 var diff = currentStamptime - timestamp
15 var points = [
16 { value: 365 * 24 * 60 * 60, suffix: '年前', max: 2 },
17 { value: 30 * 24 * 60 * 60, suffix: '月前', max: 11 },
18 { value: 7 * 24 * 60 * 60, suffix: '周前', max: 4 },
19 { value: 24 * 60 * 60, suffix: '天前', max: 6 },
20 { value: 60 * 60, suffix: '小时前', max: 23 },
21 { value: 10 * 60, suffix: '0分钟前', max: 5 }
22 ]
23
24 for (var i = 0; i < points.length; i++) {
25 var item = points[i]
26 var mode = Math.floor(diff / item.value)
27 if (mode >= 1) {
28 agoAt = Math.min(mode, item.max) + item.suffix
29 break
30 }
31 }
32 return agoAt
33}

转换存储容量大小

Wed, 27 Jan 2021 00:00:00 +0000

我们知道存储容量好几个不同的单位，如 KB、MB、GB 等等。

而在反映一块硬盘的具体容量时，总是需要根据其实际大小选用合适的单位，例如我有一块 500GB 的硬盘和一根 4GB 的内存条，就不能说成 0.5GB 的硬盘和 4000MB 的内存条。

因此，我们需要一个函数来将一个容量转换为合适的单位来表示

转换存储容量大小

value 应当是以 b 位单位的小于 1 KB，则转化成 B 小于 1 MB，则转化成 KB 小于 1 GB，则转化成 MB 以此类推，目前最大单位 PB size: 单位大小，这里是 1000

 1export function formatStorageSize (currValue = 0, unit = 'B', size = 1024) {
 2
 3 const unites = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
 4
 5 if (!unites.includes(unit)) {
 6 return new Error('请输入标准的存储单位')
 7 }
 8
 9 const powSize = n => {
10 const max = unites.length
11 return max > n ? Math.pow(size, n) : Infinity
12 }
13
14 const unitesTable = unites.map((unit, index) => {
15 return {
16 suffix: unit,
17 minValue: 1 * powSize(index),
18 maxValue: 1 * powSize(index + 1)
19 }
20 })
21
22 console.log(unitesTable)
23
24 // 先恢复到以 B 为单位然后进行计算
25 const value = powSize(unites.indexOf(unit)) * currValue
26 const { suffix, minValue } = unitesTable.find(item => item.maxValue > value)
27 const ret = (value / minValue).toFixed(2) + ' ' + suffix
28
29 return ret
30}

测试代码

闪耀你的div

Wed, 27 Jan 2021 00:00:00 +0000

想让你的网页可以 blingbling 地闪耀吗？

 1.flash-wrap {
 2 position: relative;
 3 overflow: hidden;
 4}
 5
 6.flash-wrap::after {
 7 content: "";
 8 position: absolute;
 9 left: -100%;
10 top: 0;
11 width: 100%;
12 height: 100%;
13 transform: skewx(-25deg);
14 background-image:
15 -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0),
16 rgba(255, 255, 255, .5),
17 rgba(255, 255, 255, 0));
18 z-index: 10;
19}
20
21.flash-wrap:hover::after {
22 animation: flash 2s ease infinite;
23 animation-delay: .5s;
24}
25
26@keyframes flash {
27 0% {
28 left: -100%;
29 }
30
31 100% {
32 left: 100%;
33 }
34}

欢迎提示语分享

Tue, 29 Dec 2020 00:00:00 +0000

当用户登录你的系统时，如果能够给出一个友好有趣的提示语，想必更能让你的用户感受到开发者的用心。

今天分享一个当用户登入系统的友好提示语：

 1function timeFix () {
 2 const time = new Date()
 3 const hour = time.getHours()
 4 const timeMap = {
 5 9: '早上好',
 6 11: '上午好',
 7 13: '中午好',
 8 20: '下午好',
 9 24: '晚上好'
10 }
11 const key = Object.keys(timeMap).find(key => hour <= key)
12 return timeMap[key]
13}
14
15function welcome () {
16 const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
17 const index = Math.floor(Math.random() * arr.length)
18 return arr[index]
19}