前端开发
文章平均质量分 92
Jenn168
这个作者很懒,什么都没留下…
展开
-
Math.round(),Math.ceil(),Math.floor()的区别
一、Math.round() 根据“round”的字面意思“附近、周围”,可以猜测该函数是求一个附近的整数,看下面几个例子就明白。小数点后第一位<5 正数:Math.round(11.46)=11 负数:Math.round(-11.46)=-11小数点后第一位>5 正数:Math.round(11.68)=12 负数:Math.round(-11.68)=-12小数点后第一位=5 正数:Math.round(11.5)=12 负数:Math.round(-11.转载 2020-11-25 15:39:21 · 345 阅读 · 0 评论 -
执行含有【模板字符串】html代码
1、如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。// 写法一let str = 'return ' + '`Hello ${name}!`';let func = new Function('name', str);func('Jack') // "Hello Jack!"// 写法二let str = '(name) => `Hello ${name}!`';let func = eval.call(null, str);func('Jack') // "Hello原创 2020-09-11 21:02:54 · 754 阅读 · 1 评论 -
js用正则取${}中的值
var str = "124fddr32 3532${253} $23354${233} +\ k' 545xx54${666}233545xxxxx";var reg = /\$\{(.+?)\}/;var reg_g = /\$\{(.+?)\}/g;var result = str.match(reg_g);console.log("result=",result);var list = []for (var i = 0; i < result.length; i++) {原创 2020-09-11 20:13:30 · 6696 阅读 · 1 评论 -
JS在不改变旧对象的前提下进行对象copy的几种方式
我们js中的对象,会包含很多属性值和方法,当我们想把它的内部属性复制给一个新的对象时,我们如何去做呢?你可能会说直接 b = a就可以了。no no no,这样两个对象其实指针指向的还是一个内存中的对象,当b发生变化的时候,a也是变化的,这并不是我们想要的结果。那么,以下面几种方法来看看具体实现过程吧。如下,有一个person对象,其中包括几个基本的属性值const person = { 'name': 'wangying', 'sex' : 'female', 'age' : 18,}原创 2020-09-06 16:39:01 · 945 阅读 · 0 评论 -
webpack图片压缩image-webpack-loader
{// 图片文件的处理 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use:[ { loader: 'url-loader', options: { // limit代表图片最大的大小,图片小于limit时,在加载该图片时会将图片编译为base64形式的字符串 // 超过limit的图片会被压缩到dist文件夹中 limit: 8192, // 当图片小于8k的时候原创 2020-09-05 11:55:48 · 1936 阅读 · 0 评论 -
UglifyJs打包报错:Unexpected token: keyword const
背景描述: UglifyJS Webpack Plugin插件用来缩小(压缩优化)js文件,至少需要Node v6.9.0和Webpack v4.0.0版本。 webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js,webpack 4版本之后被移除了,使用config.optimization.splitChunks来代替。最近,JavaScript项目在打包过程中莫名其妙报错:�[1m�[31mERROR in js/main.404原创 2020-09-05 11:40:36 · 1386 阅读 · 2 评论 -
css绘制半圆,1/4圆,半椭圆,1/4椭圆
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*半圆*/ .box1{ width:100px; height: 50px; margin: 20px; background-color: red; border-radius: 50px原创 2020-08-28 15:25:14 · 935 阅读 · 0 评论 -
css3动画让风车转起来
欢迎使用Markdown编辑器 CSS3动画样式不多,但是呢,它的每一个特性能实现的功能还是挺多的,有句话说的好,只有你想不当的,而没有你做不到的。好了,废话不多说,直接上代码。html代码 在html代码中,使用4个div封装了一下风车的扇叶并将封装好的扇叶放入一个大的div(#leaf_box)中,最下面是风车的杆子,这里给了它外面的div(#box)相对定位,这样固定风车柄时就可以直接相对于它外面的盒子设置偏移量就行了<div id="box"> <div id="l原创 2020-08-28 14:42:40 · 903 阅读 · 0 评论 -
前端中几个单位(em、rem、vh、vw)的区别
1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照后面的例子。2.rem这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。参照后面给的demo3.vhvh就是当前屏幕可见高度的1%,也就是说hei原创 2020-08-03 10:49:47 · 2150 阅读 · 0 评论 -
实现div中的img图片垂直水平居中
body结构<body> <div> <img src="1.jpg" alt="haha"> </div></body>方法一(display: table-cell) 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text/css"> *{ margin: 0;原创 2020-08-01 17:54:41 · 913 阅读 · 0 评论 -
js三种获取数组的最后一个元素的方法
一: pop()方法pop()方法,删除数组最后一个元素,并返回该元素,所以利用这个方法可以取到数组的最后一个,同理shift()可以取到数组的第一个元素(shift()删除数组第一个元素,并返回该元素)let arr=[1,2,3];let ele = arr.pop(); // 删除数组最后一个并返回删除的元素 console.log(ele); // 3注意: pop() 方法删除数组的最后一个元素,会把把数组长度减 1,且返回它删除的元素的值。如果数组已经为空,则 pop()原创 2020-07-23 16:17:19 · 38436 阅读 · 1 评论 -
前端开发最强编辑器VS Code的常用快捷键整理
ctrl+l 清空控制台ctrl+shift+p 显示所有命令ctrl+p 快速打开最近打开的文件ctrl+F 在文件中查找某个单词ctrl+shift+L 查找后的替换Ctrl + H 替换Shift+F12 查看函数被谁调用Ctrl+Shift+N 打开新的编辑器窗口 / win10中有新建文件夹的功能Ctrl+Shift+W 关闭编辑器shift + end 从头部选中一行shift + home 从尾部选中一行shift + alt + ↓ 快速复制一行原创 2020-07-23 15:56:45 · 290 阅读 · 0 评论 -
前端工程师养成记——三、CSS入门
CSS入门格式 选择器 { 属性1:值1; 属性2:值2; } div{ width: 50%; height: 100px; background-color: red; }单位 px —> 像素(pixel)、百分比(%)基本样式 width(宽)、height(高)、background-color(背景色) 长度单位: 1、 px:像素原创 2020-06-21 15:46:51 · 318 阅读 · 0 评论