- 博客(25)
- 收藏
- 关注
原创 流图themeRiver 学者人物页研究兴趣统计图
介绍学者人物介绍页需要做一个themeRiver图,用echarts做了个图实现效果如下:实现代码var data = [['2007', 0, "学术文章"],['2008', 4, "学术文章"],['2009', 0, "学术文章"],['2010', 0, "学术文章"],['2011', 0, "学术文章"],['2012', 0, "学术文章"],['2013', 0, "学术文章"],['2014', 0, "学术文章"],['2015', 0, "学术文章"],
2020-12-29 11:35:09
194
原创 uni-app 添加返回顶部按钮
<view class="go-top" :style="{'display':(isTop===true? 'block':'none')}"> <image src="../../static/img/top.png" @click="top" mode="widthFix" /></view>data() { return { isTop: false, }},methods: { top() { //回到顶部 uni.pageScroll
2020-11-11 15:52:35
3308
原创 音频视频播放无法拖动快进
在项目中使用 <audio> <video> 标签时出现了无法拖动进度条,无法快进的问题解决方法如下后端:@RequestMapping(value = "audioListen") @ResponseBody public String getAudio(HttpServletRequest request, HttpServletResponse response,@RequestParam String path) throws Exception{
2020-07-27 11:37:20
2453
原创 判断页面是不是第一次被加载
方法1 if(window.name == ""){ console.log("首次被加载1"); window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 }else if(window.name == "isReload"){ console.log("页面被刷新2"); }方法2 if (window.performance.navig
2020-07-27 10:58:02
1179
原创 图片
png8/png24/png32之间区别• png8 ---- 256色 + 支持透明 较小• png24---- 2^24色 + 不支持透明 较大• png32---- 2^24色 + 支持透明 使用时可根据 文件大小 、色彩丰富度去使用,每种图片都有特点,针对不同的业务场景选择不同的图片格式很重要不同格式图片常用的业务场景• jpg 有损压缩,压缩率,高不支持透明 --- 大部分不需要透明图片的业务场景• png 支持透明,浏览器...
2020-06-15 17:45:53
137
原创 资源的合并与压缩
资源的合并与压缩• 减少http请求数量• 减少请求资源大小1.html压缩html代码压缩空格、制表符、换行符、html注释等HTML压缩对于小项目压缩可能效果并不是很明显,24k的html压缩后是22k左右;但是对于大型互联网公司来说能节省一笔不小的开销,如下:如何进行HTML压缩:• 使用在线网站进行压缩(基本不会用)• nodejs 提供了html-minifier工具(配置参数),(nodejs可以作为构建工具(在构建层压缩HTML)、服务端语言(在服...
2020-06-15 16:50:02
183
原创 1 性能优化前情
web 前端本质是一种GUI软件安卓开发是CS架构,web前端是BS架构web前端访问页面的过程是 动态增量的加载资源的过程浏览器的请求从发送到返回都经历了什么请求过程中性能优化点• dns 是否可以通过缓存减少查询时间• 网络请求过程走最近的网络环境?• 相同的静态资源是否可以缓存• 能否减少请求http请求大小• 减少http请求• 服务端渲染...
2020-06-15 15:31:34
127
原创 样式
非布局样式(字体)字体serif 衬线字体 如:宋体sans-serif 非衬线字体 如:黑体monospave 等宽字体cursive 手写体fantasy 花体 英文中比较多多字体fallback多平台下的字体适配机制font-familly: 'PingFang SC', 'Microsoft Yahei', monospace;字体族不用加引号monospace网络字体、自定义字体iconfont远程字体的引用<link rel="stylesheet" hr
2020-06-15 14:43:31
141
原创 css 选择器
Cascading style sheet 层叠样式表选择器用于匹配 HTML 元素分类和权重解析方式和性能值得关注的选择器选择器分类元素选择器 a{}伪元素选择器 ::before{} (真实存在页面中可以被展示)类选择器 .link{}属性选择器 [type=radio]{}伪类选择器 :hover{} (代表元素的一种状态 )ID 选择器 #id{}组合选择器 [type=checkbox] + label{}否定选择器 :not(.link){
2020-06-15 11:47:19
89
原创 HTML5 doctype
doctype意义是什么让浏览器以标准模式渲染让浏览器知道元素的合法性HTML XHTML HTML5 的关系HTML是属于SGML的应用XHTML属于XML,是HTML 进行 XML 严格化的结果HTML 不属于 SGML 不属于XML ,比 XHTML 宽松HTML5有什么变化新的语义化元素表单增强新的API (离线、音视频、图形、实时通信、本地存储、设备能力)分类和嵌套em和i区别em 是语义化标签,表强调i 是纯样式标签,表斜体HTML5中 i
2020-06-12 18:52:38
124
原创 HTML元素嵌套关系
• 块级元素可以包含行内元素• 行内元素不一定能包含块级元素• 行内元素一般不能包含块级元素 (a>div:计算内容模型时,a本身是不参与计算的,是否合法要看此标签父级标签是否能包含div)html嵌套具体还是要根据上文内容模型来判断...
2020-06-12 18:24:01
435
原创 HTML分类
HTML分类1) 按默认样式分 •块级block •行内inline •inline-block 2) 按内容分 内容模型:参考:https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
2020-06-12 15:54:40
291
原创 HTML版本 HTML5新增内容
HTML版本• HTML4/4.01(SGML)• XHTML(XML)• HTML5HTML5新增内容1)新区块标签 •section •article •nav •aside2)表单增强 • 日期、时间、搜索 • 表单验证 • Placeholder 自动聚焦HTML新增语义 • header/footer 头尾• section/article 区域(前者更零碎一些)• ...
2020-06-12 15:38:11
129
原创 HTML常见元素
一、HTML常见元素 meta title link style script basediv/section/article/aside/header/footerpspan/strong/emtable/thead/tbody/tr/tdul/ol/li/dl/dt/ddaform/input/select/textarea/button详解:<meta charset="UTF-8">charset 表示页面字符集编码<meta name="
2020-06-12 15:07:17
374
1
原创 js去掉富文本中html标签和图片
var msg = content.replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, '\n').replace(/<br\/?>/gi, '\n').replace(/<[^>/]+>/g, '').replace(/(\n)?<\/([^>]+)>/g, '').replace(/\u00a0/g, ' ').replace(/ /g, .
2020-06-12 13:40:09
2625
原创 js获取富文本html代码中图片地址
后台富文本传入前端时,有时需要提取其中的图片function getimgsrc(html) { var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim; var arr = []; while (tem = reg.exec(html)) { arr.push(tem[2]); } return arr; }参考地址....
2020-06-12 11:36:42
1439
原创 两行li标签float 时,第二行第一个li 移到了 第二行第二个,后面的挤下去了
问题ie浏览器中打开vue项目时,两行li标签float 时,第二行第一个li 移到了 第二行第二个,后面的挤下去了解决方法给第二行第一个li加css样式 clear:both;
2020-06-12 11:26:34
477
原创 SCRIPT1002: 语法错误
问题ie浏览器中打开vue项目时报错:SCRIPT1002: 语法错误解决方法这个问题可能有很多因素,我遇到的原因是swiper版本过高,调成"swiper": “^3.4.2”
2020-06-12 11:20:32
4605
2
原创 SCRIPT5007: 无法获取未定义或 null 引用的属性“call”
问题ie浏览器中打开vue项目时报错:SCRIPT5007: 无法获取未定义或 null 引用的属性“call”解决方法1、确保webpack版本在 2.6.1以上2、安装babel-polyfill:cnpm install babel-polyfill -D3、webpack.base.conf.js 文件添加require("babel-polyfill")module.exports = { entry: { app: ['babel-polyfill', './src/
2020-06-12 11:07:46
6519
原创 vue-cli3 中使用 iframe 路径不起作用
iframe 会存在能耗、安全问题,有时还是会用到问题在cli3中使用 iframe ,总显示#app页面内容,src中设置的路径不起作用解决方法将要引用的页面移动到 public 文件夹中 且路径不是用 ../../public/web.html, 而是直接用 /web.html ,问题就解决了<iframe ref="iframe" :src="'web.html" w...
2019-11-19 10:02:55
2117
3
原创 向数组对象中添加属性
向数组infoLists中每个对象添加名为imgSrc的属性,属性值从数组imgUrl中获取var arr = this.infoListvar curData = []arr.forEach((item, index) => { curData.push( Object.assign({}, item, {‘imgSrc’: this.imgUrl[index]}) )}...
2019-11-11 11:11:02
1304
原创 Vue项目中动态绑定src路径
问题1vue项目中图片路径为变量时不能显示,如下<img :src="imgSrc" alt="">this.MyimgSrc = ‘../../assets/style/icon/icon.png'解决方法:this.imgSrc = require('../../assets/style/icon/icon.png')问题2把获取到的图片放入数组中不显示解决方法...
2019-11-11 11:08:27
1632
原创 vue-cli3 中引入 Jquery vue中配置Jquery
1. 安装jquerynpm install jquery --save或在package.json中指定版本号,然后运行npm install命令"dependencies": { "jquery": "^3.4.1" }npm install2. 配置vue.config.js在 vue.config.js 中const webpack = require('w...
2019-11-07 16:32:24
545
原创 vue-cli3.0中Tslint配置
注意注意注意,如有侵权立马删:文章来源配置之后npm run serve重启一下{ // 禁止自动检测末尾行必须使用逗号,always总是检测,never从不检测,ignore忽略检测 "trailing-comma": [true, { "singleline": "never", "multiline": { "object...
2019-11-07 16:30:31
480
原创 vue-cli3 中停tslint
一、不检测个别语句在不检测的语句上加 // @ts-ignore// @ts-ignore二、停掉tslint在tslint.json中设置:// tslint.json{ "defaultSeverity": "none"}在vue.config.js中加如下配置module.exports = { lintOnSave: false // 关闭代码验证...
2019-11-07 16:16:58
1541
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人