問題總結21-07-12至21-08-15
阿新 • • 發佈：2021-08-12
⭐Canvas繪製粒子連線特效
1 var canvas = document.getElementById("cas"); 2 var ctx = canvas.getContext("2d"); 3 4 resize(); 5 window.onresize = resize; 6 //定義畫布大小的函式 7 function resize() { 8 canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;9 canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 10 } 11 //定時設定 瀏覽器下次重繪之前繼續更新下一幀動畫 12 var RAF = (function() { 13 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { 14 window.setTimeout(callback, 1000 / 60); 15 }; 16 })(); 17 18 // 滑鼠活動時，獲取滑鼠座標 19 var warea = {x: null, y: null, max: 20000}; 20 window.onmousemove = function(e) { 21 e = e || window.event; 22 23 warea.x = e.clientX; 24 warea.y = e.clientY;25 }; 26 window.onmouseout = function(e) { 27 warea.x = null; 28 warea.y = null; 29 }; 30 31 // 新增粒子 32 // x，y為粒子座標，xa, ya為粒子xy軸加速度，max為連線的最大距離 33 var dots = []; 34 for (var i = 0; i < 300; i++) { 35 var x = Math.random() * canvas.width; 36 var y = Math.random() * canvas.height; 37 var xa = Math.random() * 2 - 1; 38 var ya = Math.random() * 2 - 1; 39 40 dots.push({ 41 x: x, 42 y: y, 43 xa: xa, 44 ya: ya, 45 max: 6000 46 }) 47 } 48 49 // 延遲100秒開始執行動畫，如果立即執行有時位置計算會出錯 50 setTimeout(function() { 51 animate(); 52 }, 100); 53 54 // 每一幀迴圈的邏輯 55 function animate() { 56 ctx.clearRect(0, 0, canvas.width, canvas.height); 57 58 // 將滑鼠座標新增進去，產生一個用於比對距離的點陣列 59 var ndots = [warea].concat(dots); 60 61 dots.forEach(function(dot) { 62 63 // 粒子位移 64 dot.x += dot.xa; 65 dot.y += dot.ya; 66 67 // 遇到邊界將加速度反向 68 dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1; 69 dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1; 70 71 // 繪製點 72 ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1); 73 74 // 迴圈比對粒子間的距離 75 for (var i = 0; i < ndots.length; i++) { 76 var d2 = ndots[i]; 77 78 if (dot === d2 || d2.x === null || d2.y === null) continue; 79 80 var xc = dot.x - d2.x; 81 var yc = dot.y - d2.y; 82 83 // 兩個粒子之間的距離 84 var dis = xc * xc + yc * yc; 85 86 // 距離比 87 var ratio; 88 89 // 如果兩個粒子之間的距離小於粒子物件的max值，則在兩個粒子間畫線 90 if (dis < d2.max) { 91 92 // 如果是滑鼠，則讓粒子向滑鼠的位置移動 93 if (d2 === warea && dis > (d2.max / 2)) { 94 dot.x -= xc * 0.03; 95 dot.y -= yc * 0.03; 96 } 97 98 // 計算距離比 99 ratio = (d2.max - dis) / d2.max; 100 101 // 畫線 102 ctx.beginPath(); 103 ctx.lineWidth = ratio / 2; 104 //線條顏色 105 ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')'; 106 ctx.moveTo(dot.x, dot.y); 107 ctx.lineTo(d2.x, d2.y); 108 ctx.stroke(); 109 } 110 } 111 112 // 將已經計算過的粒子從陣列中刪除 113 ndots.splice(ndots.indexOf(dot), 1); 114 }); 115 116 RAF(animate); 117 }
頁面使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 6 <title></title> 7 </head> 8 <body> 9 <!-- 頁面背景 --> 10 <canvas id="cas"></canvas> 11 </body> 12 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> 13 <script src="./js/canvas.js"></script> 14 </html>
⭐靜態html檔案在手機上訪問
1. 安裝node
2. 全域性裝anywhere的npm包(npm i -g anywhere)
3. 到任意目錄下用命令列執行anywhere(-p 引數可以設定啟動埠)
⭐清空input輸入框歷史記錄
1 <input type="email" name="email" autocomplete="off" />
⭐js千分位加逗號
1.parseFloat(num).toLocaleString()
2.
1 <script> 2 'use strict' 3 let format = n => { 4 let num = n.toString() 5 let decimals = '' 6 // 判斷是否有小數 7 num.indexOf('.') > -1 ? decimals = num.split('.')[1] : decimals 8 let len = num.length 9 if (len <= 3) { 10 return num 11 } else { 12 let temp = '' 13 let remainder = len % 3 14 decimals ? temp = '.' + decimals : temp 15 if (remainder > 0) { // 不是3的整數倍 16 return num.slice(0, remainder) + ',' + num.slice(remainder, len).match(/\d{3}/g).join(',') + temp 17 } else { // 是3的整數倍 18 return num.slice(0, len).match(/\d{3}/g).join(',') + temp 19 } 20 } 21 } 22 format(12323.33) // '12,323.33' 23 </script>
⭐react+ts配置@根路徑
1.
2.
3. 如果要同時通過src引用：
1 “paths”: [ 2 "src/*": ["./src/*"], 3 "@/*": ["./src/*"] 4 ]
⭐ts中setInterval型別為NodeJS.Timeout
⭐import XLSX from 'xlsx-style'報錯
This relative module was not found: ./cptable in ./node_modules/[email protected]@xlsx-style/dist/cpexcel.js
在\node_modules\xlsx-style\dist\cpexcel.js 807行的
var cpt = require('./cpt' + 'able');改成var cpt = cptable;
⭐git
1 git branch -a //檢視本地分支 2 git checkout -b 本地分支 origin/遠端分支 3 git merge 要合併的分支名字 4 git branch -d 要刪除的分支名字 5 git branch -D 要刪除的分支名字 //強制刪除 6 git remote show origin //檢視遠端分支和本地分支對應 7 git remote prune origin //刪除遠端已經不存在的本地分支 8 git fetch //把遠端分支上所有的更新都拉取下來
⭐修改echarts儀表盤的背景顏色
⭐echarts折線圖從x軸原點開始
1 option = { 2 xAxis: { 3 type: 'category', 4 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 5 boundaryGap: false // 不留白，從原點開始 6 }, 7 yAxis: { 8 type: 'value' 9 }, 10 series: [{ 11 data: [820, 932, 901, 934, 1290, 1330, 1320], 12 type: 'line' 13 }] 14 };
⭐echarts折線圖顯示最大值的點數值
markPoint: type: 'max'
⭐js table裡面新增元素
1 td = document.createElement("td"); 2 td.innerHTML = "<input type='text'/>"; 3 tr.appendChild(td);
⭐sourceTree拉取程式碼報錯
remote: HTTP Basic: Access denied
⭐JSDOC註釋規範化
https://blog.csdn.net/KNIGH_YUN/article/details/104845603
⭐偽元素沒有建立新的元素
偽類
⭐JSX.Element和React.ReactNode區別
https://blog.csdn.net/sinat_36146776/article/details/105734353
⭐require().default
https://www.cnblogs.com/cangqinglang/p/10445256.html
⭐js返回頂部
document.documentElement.scrollTop = 0
⭐react區分不同的生產環境
1 if (process.env.NODE_ENV === 'production') { 2 return `https://****.*****.com/#/dashboard/${row.dashboardId}/show` 3 } else if (process.env.NODE_ENV === 'stage') { 4 return `https://*****.st.***.com/#/dashboard/${row.dashboardId}/show` 5 } else { 6 return `http://*****.test.****.com/#/dashboard/${row.dashboardId}/show` 7 }
⭐Uncaught SyntaxError: Unexpected token '<'
https://blog.csdn.net/weixin_43742708/article/details/110594790