我的coding笔记

alyx111
265 阅读2分钟

1.各种参考网站

1.代码测试网站

https://codepen.io/Chokcoco/pen/BaLvJOb

2.炫酷边框

https://juejin.cn/post/6918921604160290830

3.js资源总结

https://www.bootcdn.cn/ http://datav.jiaminghi.com/guide/borderBox.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2

2. 各种偷懒技巧

1. 复制控制台打印的数据

https://blog.csdn.net/weixin_29491885/article/details/100097503

2. scss轉css(vscode)

1、插件：live scss compile 2、watching scss

3.直接测试js代码

cmd 裡面 node xxx.js

4. vscode下调整下载图片的背景颜色

Luna paint 插件 調整rgb

3.各种不常用的知识点

1.JSON用法

JSON.parse(JSON.stringify(self.ctx.data))

2. css的calc()

    position: absolute;
    top: calc(100% - 70%);
    left: calc(100% - 11%);

4.各种坑

1.移除echarts散点图默认的文字描边效果

给label增加颜色，虽然默认是#fff,但是配置项里面必须把color写出来，这样才能显示正常

2.echarts绑定动态数据，数据混乱

官网：https://echarts.apache.org/zh/api.html#echartsInstance.setOption
首先，chart.setOption(option, notMerge, lazyUpdate)中 notMerge 可选，默认false，false就是合并，true就是不合并

3.table线条粗细不一致

table {
    border-collapse: separate;}

只給td加border-bottom

5.封装函数

1. downloadAllLink.js

const allA = document.querySelectorAll('a')
const allAArray = Array.from(allA)
allAArray.forEach((a, index) => {
  console.log(a.innerText)
  if (a.innerText === '../' || a.innerText == 'http-server') {
    return
  }
  setTimeout(() => {
    downloadFile(a.href)
  }, index * 100)

})
function downloadFile(url) {
  console.log(url)
  const a = document.createElement('a')
  a.href = url
  a.download = url.split('/').pop()
  a.click()
}

2. 时间戳转化函数

function formatTimestramp(timestamp, reg = 'YYYY-MM-DD HH:mm:ss') {
    var date = new Date(timestamp);
    var year = date.getFullYear();
    var month = String(date.getMonth() + 1).padStart(2, '0');
    var day = String(date.getDate()).padStart(2, '0');
    var hour = String(date.getHours()).padStart(2, '0')
    var minute = String(date.getMinutes()).padStart(2, '0');
    var second = String(date.getSeconds()).padStart(2, '0');
    var reg = reg.replace('YYYY', year);
    reg = reg.replace('MM', month);
    reg = reg.replace('DD', day);
    reg = reg.replace('HH', hour);
    reg = reg.replace('mm', minute);
    reg = reg.replace('ss', second);
    return reg;
}

3.js简单实现数字国际化

    const price = 16601.91
    const a = price.toLocaleString()
    console.log(a); // 16,601.91

    const b = price.toLocaleString('de-DE')
    console.log(b); // 16.601,91

    const c = price.toLocaleString('de-DE',{
        style:'currency',
        currency:'GBP'
    })
    console.log(c); // 16.601,91 £
 
    const d = new Intl.NumberFormat ('en-US',{
        style:'currency',
        currency:'GBP'
    }).format(price)
    console.log(d); // £16,601.91

4.randomId

function createUUID() {
  var dt = new Date().getTime()
  var uuid = 'xxxxxxxxxyxxxxxxxyxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (dt + Math.random() * 16) % 16 | 0
    dt = Math.floor(dt / 16)
    return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
  })
  return uuid
}

5.json数据格式

[{"index":"1","empNo":"1","name":"张三","shift":"白班"}, {"index":"2","empNo":"2","name":"李四","shift":"白班"}, {"index":"3","empNo":"3","name": "王五","shift":"白班"}, {"index":"4","empNo":"4","name": "赵六","shift":"白班"}]

6.阿拉伯数字转中文

function numToWeek(num){
    var week=['日','一','二','三','四','五','六']
    return '星期'+week[num]
}

6.各种 demo

1.字体引入demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @font-face {
        font-family: "myFont";
        src: url("xxx");
    }
    .demo {
        font-family: myFont;
    }
</style>
<body>
    <div class="demo3">語音報警1</div>
    <div class="demo">語音報警2</div>
</body>
<script>

</script>

</html>

2.i18ndemo（data-属性）


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <ul>
      <li onclick="switchLang('zh-hans')">
        简体中文
      </li>
      <li onclick="switchLang('zh-hant')">
        繁体中文
      </li>
      <li onclick="switchLang('en')">
        英文
      </li>
    </ul>
  </div>
  <div>
    <span data-locale="text_1"></span>
    <span data-locale="text_2"></span>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script>
    const lang = "zh-hans"
    const langMap = {
      en: {
        text_1: "test",
        text_2: "web page"
      },
      "zh-hans": {
        text_1: "测试",
        text_2: "网页"
      },
      "zh-hant": {
        text_1: "測試",
        text_2: "網頁"
      }
    }

    $('[data-locale]').each((idx, ele) => {
      $(ele).text(langMap[lang][$(ele).data('locale')])
    })
    function switchLang(lang) {
      $('[data-locale]').each((idx, ele) => {
        $(ele).text(langMap[lang][$(ele).data('locale')])
      })
    }
  </script>
</body>

</html>

3.root属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root{
        background-color: yellow;
    }
    .demo{
        width: 300px;
        height: 300px;
        background-color: pink;
        border: 1px solid red;
    }
</style>
<body>
    <div class="demo"></div>
</body>
</html>

4.m3u8视频流播放

給我一個m3u8數據流格式讓我播放
參考網站
https://dplayer.diygod.dev/zh/guide.html
https://www.bootcdn.cn/ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
 
  <!-- m3u8數據流播放 -->
  <div id="dplayer" class="player" autoplay: true></div>
  <script src="./js/hls.min.js"></script>
  <script src="./js/DPlayer.min.js"></script>
  <script>
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      video: {
        url: 'xxx.m3u8',
        type: 'hls',
      },
      autoplay: true,
      allowfullscreen: true,
      volume: 0,
      pluginOptions: {
        hls: {
          // hls config
        },
      },
    });
    document.querySelector('video').muted = true
    console.log(dp.plugins.hls); // Hls 实例
  </script>
  <!-- <script >
      // 另一种方式，使用 customType
        const dp = new DPlayer({
          container: document.getElementById('dplayer'),
          video: {
        // url: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
        url: 'http://ciiot.efoxconn.com/foxconn/A51零件自動化加工線.stream/playlist.m3u8',

            type: 'customHls',
            customType: {
              customHls: function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
              },
            },
          },
        });
    </script> -->


  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }

    .player {
      width: 100%;
      height: 100%;
    }
  </style>
</body>

</html>

5.手写一个三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .demo {

            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-bottom-color: red;
        }
    </style>
    <div class="demo"></div>
</body>

</html>

6.echarts 分段颜色拼接demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        let datas=[
            [0, 30, '-', '-', '-'],
            ['-', 30, 35, '-', '-'],
            ['-', '-', 35, 63, '-'],
            ['-', '-', '-', 63, 77]
    ]
        let series = [
            {
                name: 'Train Data',
                type: 'line',
                stack: '1',
                data: datas[0]
            },
            {
                name: 'Test Data',
                type: 'line',
                stack: '2',
                data:datas[1]
            },
            {
                name: 'Predicting Data',
                type: 'line',
                stack: '3',
                data:datas[2]
            },
            {
                name: 'Forcasting Data',
                type: 'line',
                stack: '4',
                data: datas[3]
            },
        ]
        // 指定图表的配置项和数据
        option = {
            // title: {
            //     text: 'Forcasting of Sodick Wire-Cutting Machine-Filter Pressure'
            // },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Train Data', 'Test Data', 'Predicting Data', 'Forcasting Data']
            },
            grid: [{
                show: false,
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            }],
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true
                },
                axiosLine: {
                    show: false,
                    lineSTULE: {}
                },
                axiosTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                data: ['0', '30', '60', '90', '120', '150', '180', '210'],
                axisLabel: {
                    show: true,

                }
            },
            series: series
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>

7.滚动条样式修改

<body>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        .test-5{
            height: 300px;
            overflow: auto;
        }
        .content{
            height: 100vh;
        }
        .test-5::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .test-5::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background-color: skyblue;
            background-image: -webkit-linear-gradient(45deg,
                    rgba(255, 255, 255, 0.2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0.2) 75%,
                    transparent 75%,
                    transparent);
        }

        .test-5::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #ededed;
            border-radius: 10px;
        }
        .scrollbar{
            height: 5px;
        }
    </style>
    <div class="test test-5">
        <div class="content"></div>
    </div>
</body>

8.滚动条隐藏demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL + VUE_APP_ASSETS + '/' %>favicon2.ico" />
    <title>滚动条样式</title>
    <!-- 父盒子加overflow：scroll -->
    <style>
      .container{
        height: 100%;
        overflow: hidden;
        position: relative;
      }
      .father{
        overflow: scroll;
        height: 200px;
        margin-bottom: -17px;
        margin-right: -17px;
      }
      .demo{
        height: 100px;
        border: 1px solid red;
      }
      
    
    </style>
  </head>
  <body>
   <div class="container">
      <div class="father">
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
        <div class="demo"></div>
      </div>
    
   </div>
  </body>
</html>
avatar
文章
阅读
粉丝