Fork me on GitHub
image frame

小陆的个人空间

前端内容积累

这里都是之前工作中用到的一点内容收藏 所以日期比较远古

css 样式

滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
::-webkit-scrollbar {
    width: 7px;
    background-color: white;
}
::-webkit-scrollbar-thumb {
    height: 30px;
    border-radius: 10px;
    background-color: #DCDFE6;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #C0C4CC;
}

tsmp 欢迎模板

字体小数量多 样式

1
2
3
4
5
6
7
8
9
10
11
.content{
    position: absolute;
    top: 5%;
    font-size: 2em;
    left: 3%;
    height: 58.2%;
    width: 65%;
    padding: 3%;
    background-clip: content-box;
    overflow-y: hidden;
}

向上小箭头

1
2
<div class="arrow"></div>
<div class="arrow second"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.arrow{
    margin-top: 6px;
    margin-left: 35px;
    border-bottom: 6px solid #E4E7ED;
    border-right: 6px solid #fff;
    border-left: 6px solid #fff;
    width: 0px;
    height: 0px;
    position: absolute;
}
.arrow.second{
    margin-top: 7px;
    margin-left: 34px;
    border-bottom: 7px solid #fff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    z-index: 300;
}

echart仪表盘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
        show: false
    },
    series: [
        {
            name: '消息数据总览',
            type: 'gauge',
            detail: {formatter: '{value}个'},
            data: [{value: 11, name: '已处理'}],
            startAngle: 240,
            endAngle: -60,
            splitNumber: "none",
            axisLine: {
                show: true,
                lineStyle: {
                    color: [[1, '#CBAD32']],
                    width: 10
                }
            }
        }
    ]
}

el-col 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-row :gutter="16">
  <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="6"><div class="grid-content red"></div></el-col>
  <el-col :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :offset="12"></el-col>
  <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="6"><div class="grid-content blue"></div></el-col>
  <el-col :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :offset="12"></el-col>
  <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="6"><div class="grid-content green"></div></el-col>
  <el-col :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :offset="12"></el-col>
  <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" ><div class="grid-content red"></div></el-col>
  <el-col :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :offset="12"></el-col>
  <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"><div class="grid-content blue"></div></el-col>
</el-row>
<el-row :gutter="16">
  <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"><div class="grid-content red"></div></el-col>
  <el-col :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :offset="12"></el-col>
   <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" ><div class="grid-content blue"></div></el-col>
 </el-row>
</div>

exam 控制台显示

1
2
3
4
5
6
7
8
9
10
11
showBack: ''
  mounted() {
    window.vue = this
}
    getList() {
      if (this.showBack === this.examSubTime) {
        this.examForm.list.forEach(val => {
          console.log(val.name, val.canswer)
        })
      }
    }

input 失去焦点 获取焦点 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 var getOffsetTop = function(obj) {
      var tmp = obj.offsetTop
      var node = obj.offsetParent
      while (node != null) {
        tmp += node.offsetTop
        node = node.offsetParent
      }
      return tmp
    }
document.getElementById('examFormTitle').style.transition = "all 0.8s"
document.getElementById('paperFormName').style.transition = "all 0.8s"
document.getElementById('authority').style.transition = "all 0.8s"
var titleTop = getOffsetTop(document.getElementById('examFormTitle')) - 29
var nameTop = getOffsetTop(document.getElementById('paperFormName')) - 29
document.getElementById('examFormTitle').addEventListener('focus', function() {
    document.getElementById('examFormTitle').style.width = '800px'
    document.getElementById('authority').style.marginTop = titleTop + 'px'
}, false)
document.getElementById('examFormTitle').addEventListener('blur', function() {
    document.getElementById('examFormTitle').style.width = '200px'
    document.getElementById('authority').style.marginTop = '-16px'
}, false)
document.getElementById('paperFormName').addEventListener('focus', function() {
    document.getElementById('paperFormName').style.width = '800px'
    document.getElementById('authority').style.marginTop = nameTop + 'px'
}, false)
document.getElementById('paperFormName').addEventListener('blur', function() {
    document.getElementById('paperFormName').style.width = '200px'
    document.getElementById('authority').style.marginTop = '-16px'
}, false)

VSCode Setting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay"
}

标题线性动态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
   background-image: -webkit-linear-gradient(left,#006fee,#FFEEEE);
    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%; 
    -webkit-animation: masked-animation 2s linear infinite; 
} 

@keyframes masked-animation {
    0% {
        background-position: 100%  0;
    }
    100% {
        background-position: -100%  0;
    }
}

选标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="tab-line">
    <div class="title-label">已选标签:</div>
    <div v-if="hasTags" class="title-tags">
        <template v-for="(tag,i) in chooseTags">
	<span :key="i">
    <el-tag type="info" size="small">
        <span>{{ tag.label }}:</span>
        <b>{{ tag.name }}</b>
        <i class="el-icon-close" @click="removeTag(tag.label)" />
            </el-tag>
            </span>
        </template>
    </div>
    <div class="control">
        <span class="del-btn" @click="chooseTags = []">
            <i class="el-icon-delete" />&nbsp;清空
        </span>
    </div>
</div>

图片浏览器缩放防失真

1
image-rendering: -webkit-optimize-contrast;

随机生成颜色

1
2
3
4
5
6
7
8
9
getColor() {
    var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
    var colorArray = colorElements.split(",");
    var color = "#";
    for (var i = 0; i < 6; i++) {
        color += colorArray[Math.floor(Math.random() * 16)];
    }
    return color;
}

正则去除空格

1
2
/\s+/g  全部
/(^\s*)|(\s*$)/g 前后

谷歌浏览器配置可跨域

–disable-web-security --user-data-dir=C:\MyChromeDevUserData

禁用html所有操作

写在body内

1
2
3
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onbeforecopy="return false">
    xxx
</body>

数组随机排序（shuffle）

1
2
3
4
5
6
7
function shuffle(arr) {
    let i = arr.length;
    while (--i) {
        let j = Math.floor(Math.random() * i);
        [arr[j], arr[i]] = [arr[i], arr[j]];
    }
}

CSS导航栏下划线跟随效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.list{
    ul{
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      list-style-type: none;
      width: 100%;

      li{
        display: inline-block;
        position: relative;
        padding: 20px;
        font-size: 24px;
        color: #000;
        line-height: 1;
        transition: 0.2s all linear;
        cursor: pointer;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 100%;
          width: 0;
          height: 100%;
          border-bottom: 2px solid #000;
          transition: 0.2s all linear;
        }
        &:hover::before {
          width: 100%;
          top: 0;
          left: 0;
          transition-delay: 0.1s;
          border-bottom-color: #000;
          z-index: -1;
        }
        &:hover ~ &::before {
          left: 0;
        }
        &:active {
          background: #000;
          color: #fff;
        }
      }
    }
  }

增亮图片

1
2
3
4
&:hover{
	transition: filter .3s;
	filter: brightness(1.1) contrast(110%);
}
1
2
3
4
5
6
<div class="bottom">
        <div class="content">
          <span>Copyright 2020  版权所有：浙江建达科技股份有限公司  <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">浙ICP备09063166号-3</a> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/icon-police.png"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602009793">浙公网安备 33010602009793号</a> </span>
          <a href="https://www.cnzz.com/stat/website.php?web_id=1274900218" target="_blank" title="站长统计"><img border="0" hspace="0" vspace="0" src="https://icon.cnzz.com/img/pic1.gif"></a>
        </div>
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.bottom{
  color: #ffffff;
  background-color: #6F7E8F;
  text-align: center;
  bottom: 0;
  width: 100%;

  .content{
    line-height: 61px;
    color: #fff;
    font-size: 12px;
  }
}

CSS文字线性渐变

1
2
3
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

集成平台版块

1
2
3
4
5
6
7
8
9
.name {
    position: relative;
    padding: 80px 60px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 54px;
    font-family: cursive;
    font-weight: bold;
    user-select: none;
}

LED数字

https://codepen.io/zhowiny/pen/rNVzqoN?editors=1100

el-tabs 浏览器页面卡死处理

1
2
3
4
5
*/\*加上display和display-direction样式属性就可以解决页面卡死问题\*/*

display:flex;

flex-direction:column;

js 数组去重

1
2
3
4
unique(arr) {
  const res = new Map();
  return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
}

页面水平垂直居中

1
2
3
4
5
6
7
.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

CSS实现宽高等比例自适应矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="box">
    <div class="scale">
        <div class="item">
        	item
        </div>
    </div>
</div>

/* box 用来控制宽度 */
.box {
  width: 80%;
}
/* scale 用来实现宽高等比例 */
.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}
/* item 用来放置全部的子元素 */
.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}
作者：虾卡拉卡
链接：https://juejin.cn/post/6844903610082410504
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

js 数组根据pid转为树形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
listToTree(old) {
  // 根据 pid 转为 tree 格式
  old.forEach(val => {
    const pid = val.pid
    if (pid !== null && pid !== 0) {
      old.forEach(temp => {
        if (temp.id === pid) {
          if (!temp.children) {
            temp.children = []
          }
          temp.children.push(val)
        }
      })
    }
  })
  old = old.filter(ele => ele.pid === null || 0)
  return old
},

递归实现

1
2
3
4
5
6
7
8
9
10
11
12
13
const arrayToTree = (arr, pid) => {
    let res = [];
    arr.forEach(item => {
        if(item.pid === pid){
            let itemChildren = arrayToTree(arr,item.id);
            if(itemChildren.length) {
                item.children = itemChildren;
            }
            res.push(item);
        }
    });
    return res;
}

js 树扁平化

1
2
3
4
5
6
7
8
9
10
11
function treeToArray(tree) {
        var res = []
        for (const item of tree) {
          const { children, ...i } = item
          if (children && children.length) {
            res = res.concat(treeToArray(children))
          }
          res.push(i)
        }
        return res
      }

正则

1
2
3
4
/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%&*]+$)(?![\d!@#$%&*]+$)[a-zA-Z\d!@#$%&*]+$/
/^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,32})$/

var text = "https://xxx.com/xxx/1.jpg,https://xxx.com/xxx/2.jpg,https://xxx.com/xxx/3.jpg"[...text.match(/[^\/\s]+\.\w+(?=,|$)/g)]
1
2
3
4
5
6
7
8
9
var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
if (keys) {
  for (var i = keys.length; i--;) {
    if (keys[i].indexOf('PERSON_TOKEN') > -1) {
      console.log(keys[i])
      document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
  }
}

控制台打印

1
2
3
4
5
6
console.log(
        `%c 是小🦌呀 %c 13003616198 %c`,
        'background:#FFE5E5 ; padding: 5px; border-radius: 5px 0 0 5px;  color: #6E6E6E',
        'background:#2ddda5 ; padding: 5px; border-radius: 0 5px 5px 0;  color: #fff',
        'background:transparent'
      )

vue 2.X 3.X 版本升降

1
2
3
4
5
6
7
8
9
10
11
vue-cli 2.x版本升级到3.x版本

npm install -g @vue/cli
或者
yarn yarn global add @vue/cli

从vue-cli 3.x版本降级到2.x版本

npm install -g @vue/cli-init
或者
yarn global add @vue/cli-init

FileManagerPlugin插件自动压缩

1. 安装FileManagerPlugin依赖

1
yarn add filemanager-webpack-plugin@^5.0.0 --dev

2. vue.config.js 中配置使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 先引入插件
const FileManagerPlugin = require('filemanager-webpack-plugin')

module.exports = {
  publicPath: '/vue3-web',
  outputDir: 'dist',
  assetsDir: 'static',
  configureWebpack: {
    plugins: [
      new FileManagerPlugin({
        // 注意！记得这里需要加一层events节点，否则会报错噢，宝
        events: {
          onEnd: {
            delete: [
              './dist.zip',
            ],
            archive: [{
              source: './dist',
              destination: './dist.zip'
            }]
          }
        }
      })
    ]
  }
}

链接：https://juejin.cn/post/6972741467605303304

el-result 集成messageBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const loading = this.$loading({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
})
setTimeout(() => {
    loading.close()
    this.$msgbox({
        showConfirmButton: false,
        message: <el-result icon='success' title={'操作成功！'} />
    }).then(() => {
        this.$emit("close")
    }).catch(() => {
        setTimeout(() => {
        	this.$emit("close")
        }, 300)
    })
}, 2000)

二进制接口文件下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
tempDownload() {
      const excelName = this.source.resource.chineseName + '导入模板.xlsx'
      var xhr = new XMLHttpRequest()
      xhr.open('GET', this.url + this.source.resource.uuid, true)
      xhr.responseType = "blob"
      xhr.setRequestHeader("_ut", getToken())
      xhr.onload = function() {
        var blob = this.response
        const url = window.URL.createObjectURL(new Blob([blob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', excelName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
      xhr.send()
    },

css 多行文本省略

1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

反调试代码

1
2
3
4
5
6
7
8
9
10
11
<script>
  !function d() { 
    try{ 
      !function cir(i) { 
        ( 1 !== ( "" + i / i).length || 0===i ) && function(){}.constructor("debugger")(),cir(++i); 
      } (0) 
    } catch(e) { 
      setTimeout(d,500) 
    }
  }() 
</script>

移动端页面适配 - H5 - 适配

使用css设置rem根字体大小

1
2
3
4
1rem = 100px
设计稿宽度: 750px
一屏宽度: 100vw
公式: 根字体大小 = (100 / 750 * 100vw);
1
2
3
4
5
6
7
html {
  font-size: calc(100 / 750 * 100vw);
}

body {
  font-size: 1rem;
}

使用javascript动态设置rem根字体大小

1
2
3
4
5
6
mode: {
  rem: *css样式使用rem单位
  scale: *css样式使用px单位
  px: *css样式使用px单位
}
designWidth: 设计稿宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function (mode) {
  var win = window
  var doc = document
  var designWidth = 750
  if (/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
    var head = document.getElementsByTagName('head')[0];
    var headMeta = [
      '<meta name="apple-mobile-web-app-capable" content="yes">',
      '<meta name="apple-mobile-web-app-status-bar-style" content="black">',
      '<meta name="format-detection" content="telephone=no">',
      '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />',
    ]
    for (var i = 0; i < headMeta.length; i++) {
      head.insertAdjacentHTML('beforeEnd', headMeta[i])
    }
    switch (mode) {
      case 'scale':
        head.insertAdjacentHTML('beforeEnd', `<meta name="viewport" content="width=${designWidth}", user-scalable=no, viewport-fit=cover />`)
        break
      case 'px':
        var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var setFont = function(){function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode='android-2.2',d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode='android-2.2':4.4>d?b.mode='android-dpi':d>=4.4&&(b.mode=b.dWidth>b.uWidth?'android-dpi':'android-scale')),void 0)}function d(){var e,f,g,h,c='',d=!1;switch(b.mode){case'apple':f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c='width='+b.uWidth+',initial-scale='+f+',minimum-scale='+f+',maximum-scale='+f+',user-scalable=no';break;case'android-2.2':a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode='android-dpi',d=!0;case'android-dpi':f=160*b.uWidth/b.dWidth*b.ratio,c='target-densitydpi='+f+', width='+b.uWidth+', user-scalable=no',d&&(b.mode='android-2.2');break;case'android-scale':c='width='+b.uWidth+', user-scalable=no'}g=document.querySelector('meta[name="viewport"]')||document.createElement('meta'),g.name='viewport',g.content=c,h=document.getElementsByTagName('head'),h.length>0&&h[0].appendChild(g)}function e(){var a='';for(key in b)a+=key+': '+b[key]+'; ';alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:'apple',userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:designWidth})}
        setFont()
        win.addEventListener('load', setFont, false)
        win.addEventListener(resizeEvent, setFont, false)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        break
      case 'rem':
        var html = doc.documentElement
        var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var setFont = function () {
          var clientWidth = html.clientWidth
          html.style.fontSize = 100 * (clientWidth / designWidth) + 'px'
        };
        setFont()
        win.addEventListener('load', setFont, false)
        win.addEventListener(resizeEvent, setFont, false)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        break
    }
  }
})('rem')

流动折线图加动画

https://www.makeapie.cn/echarts_content/x6ZJkF4MRJ.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
// 统计百分比
var data1 = [14,15,65,24,75,23,24,43,27,72,12,53];
var data2 = [45,65,24,74,75,23,42,54,13,32,52,13];
var json = {
    chart0: {
        xcategory: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        low: data1,
        lowLine: [],
    }
};
var json2 = {
    chart0: {
        xcategory: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        low: data2,
        lowLine: [],
    }
};
var zrUtil = echarts.util;
zrUtil.each(json.chart0.xcategory, function(item, index) {
    json.chart0.lowLine.push([{
        coord: [index, json.chart0.low[index]]
    }, {
        coord: [index + 1, json.chart0.low[index + 1]]
    }]);
});
zrUtil.each(json.chart0.xcategory, function(item, index) {
    json2.chart0.lowLine.push([{
        coord: [index, json2.chart0.low[index]]
    }, {
        coord: [index + 1, json2.chart0.low[index + 1]]
    }]);
});

var option = {
      backgroundColor: '#03060F',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#15ecf4'
            }
        },
        backgroundColor: 'rgba(0,0,0,.8)',
        extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
        formatter: function(params) {
            var result = params[0].name + '<br>';
            params.forEach(function(item) {
                result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                // 判断设置增长还是降低
                if (parseFloat(item.data) >= 50) {
                    result += item.seriesName + ": " + '<span class="growth">增长' + item.data + "%</span><br>"
                } else if (parseFloat(item.data) < 50) {
                    result += item.seriesName + ": " + '<span class="reduce">降低' + item.data + "%</span><br>"
                }
            });
            return result;
        }
    },
    legend: {
        data: ['同比', '环比'],
        textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
        },
        top: '5%',
        right: '5%'
    },
    grid: {
        bottom: 50,
        left: 70,
        right: 50,
    },
    xAxis: {
        axisLine: {
            show: true,
            lineStyle: {
                color: '#15faff',
            },

        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    yAxis: {
        max: 100,
        splitNumber: 4,
        interval: 25,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: '#4b4d64'
            }
        },
        axisLabel: {
            formatter: '{value} %',
            textStyle: { //改变刻度字体样式
                color: '#ffffff'
            }
        },
    },
    series: [{
            name: '环比',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 204,1, .9)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(6, 8, 41,.1)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#ffcb00'
                }
            },
            data: data1
        },
        {
            name: '环比',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 1,
            smooth: true,
            symbol: 'circle',
            effect: {
                show: true,
                smooth: true,
                period: 2,
                symbolSize: 8
            },
            lineStyle: {
                normal: {
                    color: '#ffcb00',
                    width: 0,
                    opacity: 0,
                    curveness: 0,
                }
            },
            data: json.chart0.lowLine
        },
        {
            name: '同比',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(21, 250, 255,.9)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(6, 8, 41,.1)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#15faff'
                }
            },
            data: data2
        },
        {
            name: '同比',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 1,
            smooth: true,
            symbol: 'circle',
            effect: {
                show: true,
                smooth: true,
                period: 2,
                symbolSize: 8
            },
            lineStyle: {
                normal: {
                    color: '#15faff',
                    width: 0,
                    opacity: 0,
                    curveness: 0,
                }
            },
            data: json2.chart0.lowLine
        },
    ]
};

微信测试号推送模板

1
2
3
4
5
6
7
8
9
10
11
现在是北京时间：{{date.DATA}} 
今日天气：{{weather.DATA}} 

土味情话：{{qinghua.DATA}} 
距离你的生日还有：{{birthday.DATA}} 天 
今天是我们在一起第：{{jinianday.DATA}} 天 

每日一言：{{onetext.DATA}}

【网易云时间】：{{wangyiyun.DATA}}
【舔狗日记】：{{tiangou.DATA}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
// 需要填写的地方已经标出
// 一共4个地方 appID、appsecret、模板ID、微信用户的openid
const axios = require('axios');
const moment = require('moment');
// 设置跨域请求头
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post['Content-Type'] = 'text/plain';
// 定义post请求方法
const axiosPost = function (url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, params)
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
};

// 定义get请求方法
const axiosGet = function (url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params,
            })
            .then(res => {
                resolve(res);
            })
            .catch(err => {
                reject(err);
            });
    });
};

//  定义获取token方法
async function getToken() {
    const params = {
        grant_type: 'client_credential',
        appid: 'xxx', // 你的appid  1
        secret: 'xxxxxx', // 你的secret 2
    };
    let res = await axiosGet('https://api.weixin.qq.com/cgi-bin/token', params);
    return res.data.access_token;
}

// 1、随机一句土味情话
async function getQingHua() {
    let res = await axiosGet('https://api.uomg.com/api/rand.qinghua?format=json')
    return res.data.content;
}

// 2、舔狗日记
async function getTianGou() {
    // let res = await axiosGet('http://api.weijieyue.cn/api/tgrj/api.php')
    let res = await axiosGet('https://v1.hitokoto.cn')
    return (res.data.from_who ? '【' + res.data.from_who + '】' : '') + res.data.from + ': '  + res.data.hitokoto;
}

// 3、网易云热评
async function getWangYiYun() {
    let res = await axiosGet('https://keai.icu/apiwyy/api')
    return res.data;
}

// 天气 暂时不可用
async function getWeather() {
    let res = await axiosGet('https://api.vvhan.com/api/weather?city=杭州');
    return res.data.info.type + ' 气温：' + res.data.info.low + '-' + res.data.info.high + ' 空气质量指数：' + res.data.info.air.aqi_name;
}

// 4、计算还有多少天过生日（公历）
function getDaysToBirthday(month, day) {
    let now = new Date();
    let thisYear = now.getFullYear();
    //今年的生日
    let birthday = new Date(thisYear, month - 1, day);
    if (birthday < now) {
        birthday.setFullYear(now.getFullYear() + 1);
    }
    let timeDec = birthday - now;
    let days = timeDec / (24 * 60 * 60 * 1000);
    return Math.ceil(days);
}
// 5、纪念日
function getJiNianDays(time) {
    let startTime = moment(time).format("YYYY-MM-DD");    // 开始时间
    let nowTime = moment(Date.now()).format("YYYY-MM-DD");          // 今天
    let duration = - moment(startTime).diff(nowTime) / (1000 * 3600 * 24)  // 时间戳转化为天数
    return Math.ceil(duration)
}
// 6、当前时间
function getDays() {
    let date = new Date()
    // 获取时间：时分秒
    const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
    const minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
    const secound = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
    // this.datetime = hour + ':' + minute + ':' + secound

    // 获取日期：年月日
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    // this.nowDate = month + "月" + day + "日"
    // this.nowYear = year + "年"

    // 获取星期几
    const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    return (year + "年" + month + "月" + day + "日 " + hour + '时' + minute + '分' + " " + weeks[new Date().getDay()])
}

// 7、一言
async function getOneText() {
    const res = await axiosGet('https://api.wrdan.com/hitokoto')
    return '【' + res.data.source + '】' + res.data.author + '：' + res.data.text;
}

// end定义发送消息模板
async function templateMessageSend() {
    const token = await getToken();
    const weather = await getWeather();
    const qinghua = await getQingHua();
    const tiangou = await getTianGou();
    const wangyiyun = await getWangYiYun();
    const birthday = getDaysToBirthday(7, 16)   // 填入生日(公历)
    const nowTime = getDays()
    const jinianday = getJiNianDays('2017-12-02')
    const oneText = await getOneText()
    const url = 'https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=' + token;
    const params = {
        touser: 'xxx', // 用户openid 3
        template_id: 'xxxxxx', // 模板id 4
        // url: 'http://www.baidu.com',
        topcolor: '#FF0000',
        data: {
            date: {
                "value": nowTime,
                "color": "#FCA60B"
            },
            weather: {
              "value": weather,
              "color": "#9E7B93"
            },
            qinghua: {
                "value": qinghua,
                "color": "#ff1a75"
            },
            birthday: {
                "value": birthday,
                "color": "#1E90FF"
            },
            jinianday: {
                "value": jinianday,
                "color": "#3399cc"
            },
            qinghua: {
                "value": qinghua,
                "color": "#33FF33"
            },
            tiangou: {
                "value": tiangou,
                "color": "#007f80"
            },
            wangyiyun: {
                "value": wangyiyun.content + '-- by ' + wangyiyun.user,
                "color": "#2B9D4A"
            },
            onetext: {
                "value": oneText,
                "color": "#007f80"
            }
        },
    };
    console.log(params.data)
    let res = await axiosPost(url, params);
    console.log('res: ', res.data);
}
//  执行发送订阅消息
templateMessageSend();

  • Copyrights © 2015-2024 CapDeer
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信