document.write("");

前端 - 简易开发点记录

1.IE浏览器提示"Internet Explorer 已经限制此网页运行脚本或Activex控件"
在html标签下面,head上面添加<!-- saved from url=(0014)about:intenert -->即可

2.纯js在前端使用接口获取byte[],并显示为图片
先把byte[]转为base64,然后使用xxx.src = 'data:image/png;base64,' + base64Str;

//将byte[]转化为流
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
// return binary;
}

var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
if (arrayBuffer) {
var byteArray = new Uint8Array(arrayBuffer);
var baseStr = arrayBufferToBase64(byteArray);
document.getElementById('aaa').src = 'data:image/png;base64,' + baseStr;
}
};

oReq.send(null);

  

 3.vue热重载:更新了新版的程式,用户访问还是旧版的页面,需要热重载解决问题,原本项目配置文件用的vue.config.js,所以新增了一个webpack.config.js:

let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [ // 数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 打包的模板路径
            filename: 'index.html', // 打包之后的文件名
            minify: { // 格式化html文件
                removeAttributeQuotes: true, // 去除掉双引号
                collapseWhitespace: true // 变成1行
            },
            hash: true // 会在 js后面加上 [? + 哈希]
        })
    ],
    output: {
        filename: 'index.[hash:8].js' // 这个地方也是在名字上加上哈希 后面的:8表示8位
    }
}

4. element ui 的loading图标过小调整:

// 修改 loading的图标的大小
.el-loading-spinner {
  font-size: 30px;
}

 5. echarts tooltip显示,超出图表显示范围,添加 confine参数即可

          tooltip: {
            trigger: 'axis',
            confine: true
          },

  

 6. vue div中style设置背景图片

 :style="{'background-image': `url(${require('@/assets/image/xxx.png')})`}"

7. css3 背景图片铺满

background-size: cover;

 8. 修改背景图片 渐变动画

    -webkit-transition-property: background-color;
    -webkit-transition-duration: 3s;
    -webkit-transition-timing-function: ease;
    background-color: #xxx;

9. vue 直接设置组件的参数为Int

:interval="10"

10. dom的字符串转node

parseElement(htmlString) {
      return new DOMParser().parseFromString(htmlString, 'text/html').body
        .childNodes[0]
},

11. 附加node时,添加为第一位child(vue 写法)

 this.$refs.refName.insertBefore(
      this.parseElement('Node字符串'),
      this.$refs.refName.firstChild
)

 12. svg 设置渐变色(线性,径向)

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504141680.html

13. svg高斯模糊

 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
  <path d="M150 0 L50 100 Z"   stroke-width="20" stroke="red"  filter="url(#Gaussian_Blur)"/>

</svg>

14. js 判断变量是否是字符串

typeof res == 'string'

15. 使用input选择image图片文件,并获取其base64字符串

<input
            type="file"
            accept="image/*"
            ref="file"
            @change="upload"
            multiple
          />

    upload() {
      let data = this.$refs.file.files[0]
      let imgFile = new FileReader()
      imgFile.readAsDataURL(data)
      imgFile.onload = (res) => {
        console.log(res)
        this.imageStr = res.target.result
      }
    },

 

16. 将数组打印为字符串

JSON.stringify(data)

17. vue npm install 报错:

  已有设定

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
但是安装还是报错,最后使用yarn install 就可以安装成功了

18.vue 获取xxx?a=1参数的值

  let a = this.$route.query.a; 

 19. 楷体 font-family

font-family: 'KaiTi';

 20. div内文本垂直显示,从上到下

writing-mode:tb-rl;

 21. html a标签去掉默认显示的文本底部的下划线:css

text-decoration: none;

  

 

 

 

 

-SVG- 基础知识

1. path

  示例:M 0,0 L10,10 L20,20 Z

  基础单元释义:

    M: Move To,作为路径的起始点,移动画笔位置

    L: Line to 在点之间划线,L命令将会在当前位置和新位置(L前面画笔所在的点)之间画一条线段

    H: 绘制水平线

    V: 绘制垂直线

    Z: 闭合路径命令,会从当前点画一条直线到路径的起点,尽管我们不总是需要闭合路径,但是它还是经常被放到路径的最后  

比较全一点的:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
 

 2. 动画,

  

   <circle  cx="20" cy="20"  r="20" fill="red">
	   <animate
				attributeName="r"
				values="20;0;20;0;"
				dur="4s"
				repeatCount="1"
				/>
	    <animateMotion
				calcMode="linear"
              path="m 0,0 l 75,75 "
              dur="2s"
			  begin="4s"
			fill="freeze"
				repeatcount="1"
            />
	   <animate
				attributeName="r"
				values="20;0;20;0;20"
				dur="2s"
				begin="6s"
				repeatCount="1"
				/>
	</circle>

3. 带keyPoints和KeyTimes的示例

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
     viewBox="0 0 300 200">
  <circle rx="50" ry="50" r="5" fill = "red">
  <animateMotion 
				  calcMode="linear"
				 fill="freeze"
				 calcMode = "linear"
				 path="M 50,50 100,100"
				dur="1s"
				keyTimes="0;0.5;0.9;1"
				keyPoints="0;0.1;0.1;1"/>
	  </circle>
   
</svg>

  

转载地址列表:

https://blog.csdn.net/qq_29025955/article/details/108090379;

https://blog.csdn.net/weixin_41884153/article/details/101368267

posted @ 2021-08-20 08:29  人间春风意  阅读(107)  评论(0编辑  收藏  举报