- 博客(38)
- 收藏
- 关注
RSS订阅原创 web大屏展示全屏处理
去查了下js实现浏览器全屏的方法，真的有对应的API，即document.documentElement.RequestFullScreen()，具体的浏览器有对应的写法，具体可以去网上查一下；在代码里调用了之后，问题来了，并没有生效，浏览器没有自动全屏展示，打开控制台之后，发现报了一个警告，基于浏览器的安全机制，在代码里自运行是不会被执行的，只能手动交互的时候才允许执行。经过讨论、综合考虑，使用了按F11的方案（既然浏览器已经提供了方案，又何必弄一些花里胡哨的操作呢0.0）。
2023-03-01 17:15:41
1224
原创 大屏展示浏览器适配
问题来了，大屏展示测试是在其他地方进行的，本地环境没有看过展示效果。第一次发布测试环境进行测试时，按F11全屏展示后，在大屏幕上展示时出现了滚动 条效果，离了大谱；屏幕分辨率为5760x1080，但是设置这个其实会撑出来，看来还得是用宽高100%进行适配。此次大屏项目为web端展示，设计图纸为5760 x 1080的尺寸，分为了三个页面，相当于每个页面就是1920 x 1080，开发时为了便于快速还原设计图效果，直接给html,body设置了width：5760px；
2023-03-01 16:13:21
1024
原创 js多关键字高亮处理
/注意 / /g 是正则写法；前后加()变为一个分组，直接替换。中间用 | 区分每个需要替换的字符。逗号后面的是想换成的字符！
2022-09-02 17:23:23
458
原创 echarts geo 地图文字重叠（北京城区文字重叠优化）
问题描述在http://datav.aliyun.com/portal/school/atlas/area_selector 上下载了北京市的geo json文件，绘制北京城区分布，结果北京市主城区部分区域label文字有重叠，显示效果不好，故进行优化查找网上资料发现，json文件里"properties":{“cp”:[116.418757,39.917544],“name”:“东城区”,“center”:[116.418757,39.917544]}}这里的cp":[116.418757,3.
2022-01-27 11:41:24
2006
原创 echarts完全重绘 setOption第二个参数设为true
问题：当修改setOption值的时候，我们异步回来的数据层级比较深的情况下，需要echarts重绘，否则不会如愿显示主要体现，你增加数据可以，但是减少数据，发现视图上还是保持着最多数据的展示效果，很纳闷，明明可以通过移步修改数据，为何增加可以绘制地图而减少好像就什么都没有做解决：原来是setOption的第二参数(notMerge)在做怪myChart.setOption({...},true)设置为true的话，就是notMerge，不合并false的话，就Merge，之前的东西还.
2022-01-26 10:51:30
1500
原创 echarts移动端双击事件失效问题解决
笔者在开发中遇到问题：echarts 版本为4.9.0版本，H5项目中绑定双击事件不生效（dblclick绑定不触发）。但是单击事件没问题，因工作任务紧，echarts版本也不能随意变更（其他模块也在用此特定版本），查找原因无果，所以先用了一个笨办法解决：单击模拟实现双击事件。代码如下：let g_clickTime = null;let g_TimeFn = null;let g_onItemName = '';myChart.on('click', function (params) {.
2021-12-20 15:32:56
2945
原创 js生成随机颜色
十六进制颜色，方法1const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; console.log(randomHex());十六进制颜色，方法2const randomColor = () => `#${Math.random().toString(16).substr(2, 6)}`; console.log(random.
2021-11-05 16:36:58
2463
原创 前端设置请求头POST方式下载实现
iframe、form表单提交的方法不能设置请求头；jq的ajax不能处理blob文件，这里用原生XMLHttpRequest，可以设置请求头参数，post方式，处理blob文件前端代码 /** * 导出文件方法 * @param {url} 导出方法路径 * @param {data} 传输参数（Json类型） * @param {loadSuccess} 调用成功回调方法 * @param {timeout} 请求过期时间（毫.
2021-09-26 15:15:14
2044
原创 jq导出文件及模板下载
DOM<div class="importDiv"> <!-- 页面展示部分，方便调整样式、按钮内容等 --> <input class="showInput" type="text" readonly="readonly" /> <button id="viewFileBtn">浏览</button> <!-- 真正起导入作用的是这个input，其展示样式有时不符合要求，故使用上面的展示 --> .
2021-09-09 00:42:30
345
原创 前端导出文件及导出回调监听
本文介绍比较简单也比较常用的iframe导出方式：根据后端提供的url地址，添加到iframe的src里面，然后把iframe标签添加到body里就可以导出下载。上代码：var paramA = 'paramA';var paramB = 'paramB'; // URL拼接参数var exportUrl = 'xxx/xxx/interfaceName?paramA=' + paramA + '¶mB=' + paramB; // URL拼接参数，URL由后台提供// 导出函.
2021-09-06 23:16:12
619
原创 jQuery判断滚动条滚动方向
方法一：<script> var position = $(window).scrollTop(); $(window).scroll(function() { var scroll = $(window).scrollTop(); if(scroll > position) { console.log('scrollDown'); $('div').text('向下滚动'); } else { console.log('scrollUp'); .
2021-08-27 10:04:28
840
原创 移动端echarts横竖屏自适应及按需引入
安装reactnpm install echarts --save默认安装官网最新版本echarts，可安装指定版本npm install [email protected] --save由于引入echarts文件太大，所以一般按需引入注意：按需加载是引入node_modules文件夹中的js文件，所以，如果记得改import ‘echarts/lib/chart/line’; 折线图不用改，饼图和柱形图line分别改为pie和bar移动端echarts横竖屏自适应监听手机旋转状态，.
2021-07-09 11:36:21
988
原创 javascript宏微任务及事件循环
首先要牢记一点：JS 是一门单线程语言，在执行过程中永远只能同时执行一个任务，任何异步的调用都只是在模拟这个过程，或者说可以直接认为在 JS 中的异步就是延迟执行的同步代码。另外别的什么 Web worker、浏览器提供的各种线程都不会影响这个点。大家应该都知道执行 JS 代码就是往执行栈里 push 函数（不知道的自己搜索吧），那么当遇到异步代码的时候会发生什么情况？其实当遇到异步的代码时，只有当遇到 Task、Microtask 的时候才会被挂起并在需要执行的时候加入到 Task（有多种 Ta..
2021-04-13 15:44:24
210
原创 localStorage 的优势
localStorage 的优势1、localStorage 拓展了 cookie 的 4K 限制。2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。localStorage 的局限1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。2、目前所有的浏览器中都会把localStorage的值类型限定为
2020-07-10 11:53:15
515
原创 IE内嵌iframe页面跨域异常设置
IE中内嵌iframe页面跨域问题，需要设置IE浏览器的受信任站点步骤：设置 - > internet选项 -> 选择‘安全’ -> 受信任的站点 -> 将要内嵌的iframe的网址添加进去；在‘自定义级别’里面 启用跨域；具体如下：...
2020-07-03 13:00:35
665
原创 查看localstorage大小及删除指定项
写个函数，在控制台中运行localStorageSpace();var localStorageSpace = function(){ var allStrings = ''; for(var key in window.localStorage){ if(window.localStorage.hasOwnProperty(key)){...
2020-04-15 18:06:47
2381
原创 Typescript基础知识点总结
TypescriptTypescript是javascript的一个超集，主要提供了类型系统和对ES6的支持为何选择Typescripttypescript增加了代码的可读性和可维护性typescript非常包容 (编译报错的时候，js里依然会有结果)typescript拥有活跃的社区如何使用typescript全局安装命令 npm install -g typescri...
2020-02-29 23:54:34
248
原创 前端编码规范
命名规范标题目录命名，HTML文件命名，JS文件命名，CSS、less、sass文件命名参照本项目原有文件命名规范进行命名HTML 规范语法：缩进使用 tab（4 个空格）；嵌套的节点应该缩进；在属性上，使用双引号，不要使用单引号；属性名全小写，用中划线（-）做分隔符；要在自动闭合标签结尾处使用斜线；标准模式在开头规定 doctype，来启动标准模式，doctype 要大...
2020-01-19 17:23:25
372
原创 ios移动端软键盘收起后input输入框焦点错位或无法输入解决
本文为开发中遇到的问题解决方案总结：ios移动端软键盘收起后input输入框焦点错位或无法输入解决问题描述：页面背后是可滚动的列表，前面是弹出框，里面有需要输入值的input框。当打开键盘后，弹出框跟后面的列表都会被顶上去一段距离，当再关闭键盘就可能出现：前面的弹出框回到了原来的位置，而后面的列表依然是顶上去的位置。这时后再去点击弹出框的输入框或者按钮的时候发现焦点依然停留在键盘弹出后顶上去的...
2019-09-17 22:52:39
1866
1
原创 VUE源码工具函数分析
源码中使用了typescript语法 export导出 本地练习时因为没有配置环境先注释掉// 判断当前环境 // 1.1inBrowser: 检测当前宿主环境是否是浏览器 // 通过判断 `window` 对象是否存在即可 // export const inBrowser = typeof window !== 'undefined' const inBr...
2019-02-26 14:05:36
244
原创 javascript数组知识总结
数组概念数组：有序的值的集合，都有索引（下标），索引从0开始数组的常用操作方法// 数组基本操作// 添加删除方法var arr = [1,2,3,4];// arr[0] = 10; // 修改数组里面的值// console.log(arr); // [10, 2, 3, 4]// arr[arr.length] = 5; // 通过索引添加值// console....
2019-02-24 23:33:02
87
原创 30秒CSS中文版
简介：您可以在30秒或更短的时间内弄懂的有用CSS代码片段的精选。英文版：https://github.com/atomiks/30-seconds-of-css中文版：http://caibaojian.com/30-seconds-of-css
2019-02-13 21:07:22
328
原创 JS设计模式之单例模式
单例模式：//保证一个类仅有一个实例，并且提供一个访问它的全局访问点。//如果实例不存在，则生成一个实例，如果实例存在，则返回这个实例 var singleTon = (function(){ var _instance = null; function Foo(){ var privateProp = "私有属性"; this.publicP...
2019-02-11 21:41:31
95
原创 groovy脚本里转译Unicode码
最近项目里，需要把css、html写入groovy脚本里，再在js代码中引入（这种做法方便生产上线后，项目的修改，不用重新发生产版本），但是CSS中用到了Unicode码，在groovy脚本里编译后引入js中会转成其他值，正确写法是在\后加个u例如：content：'\2174'在groovy脚本里应写为：content：'\u2174' 更多关于groovy字符串知识：https...
2019-01-29 22:27:06
2156
原创 IE8 下兼容 window.top === window
用window.top === window可以判断出当前页面是不是顶层窗口，而不是嵌套在frame中但是在IE8下好像不行；兼容ie8的写法：window.top === window.self附：Js中的window.parent ,window.top,window.self 详解在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口...
2018-12-29 17:45:03
1129
原创 解决select下拉箭头在IE中iframe下的兼容问题总结
先说说遇到的问题：项目代码中用到了select下拉标签，要兼容Chrome、opera、IE等主流浏览器，其中IE要兼容到IE8版本，select的自带样式很不美观，所以样式选择了重写，下拉箭头引用设计的背景图片，代码类似如下：select{appearance:none;-moz-appearance:none;-webkit-appearance:none;-ms-appeara...
2018-12-01 17:47:18
1134
原创 VScode插件离线安装getaddrinfo EAL_AGAIN marketplace visualstudio.com：443
https://blog.csdn.net/u012814856/article/details/80684376按照这个方法进行安装，但是在最后的时候安装失败，出现问题getaddrinfo EAL_AGAIN marketplace visualstudio.com：443解决方法：下载安装新版的VScode，老版本的要卸载干净，再按照步骤安装就ok。安装汉化语言包的时候，提示语言...
2018-11-01 11:03:37
2529
转载 遍历对象方法Object.keys()&for...in
最近的项目中用到了遍历对象的方法，但是又要兼容IE8浏览器，刚开始用的Object.keys()报错，又用回了万金油for...in，搜索了下Object.keys()的相关用法并总结如下：那么我们目前有三种遍历对象的方法了 对于对象的遍历目前有三种方式：1、for in : 会输出自身以及原型链上可枚举的属性。2、Object.keys() : 用来获取对象自身可枚举的属性键 ...
2018-10-26 16:39:20
1800
原创 百度-前端面试题
<script type="text/javascript"> function Foo(name){ this.name=name } function Bar(){} Foo.prototype.name="python" Foo....
2018-07-24 22:32:02
124
原创 百度前端面试题最新版
<script type="text/javascript"> function Foo(name){ this.name=name } function Bar(){} Foo.prototype.name="python" ...
2018-07-24 22:00:14
994
转载 npm ERR! code EINTEGRITY 解决方案
npm升级后，npm install 报错了，这就尴尬了。Google了一下在这里(https://github.com/npm/npm/issues/16861)找到了解决方案：里面各种解决方案，让Try这个命令Try那个命令，看着一脸懵逼不知道该用那个命令，浏览评论的时候发现“npm cache verify”这条命令帮助了不少人，然后果断在iterm2执行了，嗯，莫名其妙的好了。评论里的命令...
2018-07-15 11:28:41
7018
1
原创 canvas简易画板
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>canvas简易画板</title><style type="text/css"> #cvs{ border: 1px solid red;
2018-07-03 21:51:12
351
原创 canvas简易刮奖
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>简易画布抽奖</title> <style type="text/css"> /*两个元素都定位,画布在上面*/ #con{
2018-07-03 21:37:47
286
原创 原生js封装Ajax函数
Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。Ajax最大的特点就是局部刷新。Ajax 技术核心是 XMLHttpReques...
2018-06-01 21:02:29
722
原创 $.extend()的简易理解
jQuery中extend();jQuery.extend([deep], target, object1, [objectN]);用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会...
2018-06-01 20:08:01
333
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人