- 博客(34)
- 收藏
- 关注
RSS订阅原创 background图片loading（Vue版）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <my-component img="https://img0.baidu.com/it/u=1325422827,672151326&f
2021-08-04 16:23:11
270
原创 【技巧】根据key（字符串）层层查找数据
/** * 在dataObj对象中，寻找用连续.符号（a.b.c）的keyName属性 * @param dataObj * @param keyName */function lookUp(dataObj, keyName) { // 查看传入的keyName中有没有.符号 if (keyName.indexOf('.') != -1) { let names = keyName.split("."); // 设置临时变量，存储当前层查找到的数据
2021-01-12 15:59:05
256
原创 手写Promise
/** * Promise构造函数 * excutor：执行器函数（同步执行） * @param excutor */function Promise(executor) { const _this = this; _this.status = "pending"; // 给Promise对象指定status属性，初始值为pending _this.data = undefined; // 给Promise对象指定一个用于存储结果数据的属性 _this.callba
2021-01-06 14:32:40
143
原创 事件模型发布订阅模式
// 全局的event对象，提供on、off、emit方法 var event = (function () { var eventObjs = {}; return { // 注册事件，可以连续注册，也可以注册多个事件 on: function (type, handler) { (eventObjs[type] || (eventObjs[type] = [])).push(handl
2020-12-29 15:14:40
382
原创 vue的响应式转化
var data = { name:'wsw', info:[ age:27, {sex:1} ]}observe(data)function observe(data){ if(Array.isArray(data)){ data.__proto__ = arrayMethods; this.observerArray(value) }else{ walk(data); }}function observerArray(value){ for(let i = 0
2020-12-28 13:52:37
228
原创 Vue中判断是否是Html标签
// vue/dist/vue.js// 5589var isHTMLTag = makeMap( 'html,body,base,head,link,meta,style,title,' + 'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' + 'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,
2020-12-26 15:05:48
1329
原创 根据字符串路径访问对象的成员
function getValueByPath(obj,path){ let paths = path.split('.'); let res = obj; let prop; while(prop = paths.shift()){ res = res[prop]; } return res;}
2020-12-25 17:54:29
129
原创 瀑布流
<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ width: 100%; height: 100%; } .main{ positio.
2020-12-21 17:40:08
82
原创 读取本地Excel文件生成echarts
1.导入<script type="text/javascript" src="xlsx.core.min.js"></script>或yarn add xlsximport XLSX from 'xlsx'2.上传本地文件const File = function () { var that; var obj = function () { that = this; window.addEventListener("load", that.
2020-12-07 15:41:36
3330
3
原创 input上传指定类型的文件
1、 谷歌–上传文件夹添加属性webkitdirectory<input type = "file" webkitdirectory>2、 上传文件–限制类型添加accept属性<input type = "file" accept = "image/*"> <!-- 上传图片 -->视频：video/*音频：audio/*gif图片：image/gif只允许上传wav(一般用于铃声上传)：.wavexcel文件：application/
2020-10-29 23:47:51
987
原创 $()是有两个参数，第一个是选择器，第二个是作用域
$()有2个参数，一个是选择器，一个是作用域。要和("xxxx,xxx")区分。通常意义下的("xxxx,xxx")区分。通常意义下的("xxxx,xxx")区分。通常意义下的(‘xxxx’)其实是默认了第二个作用域。完整说应该是$('xxxx',document)$("#select1").dblclick(function(){ var $option=$("option:selected",this);//在select1中选择selected的option $option.ap
2020-10-13 15:27:05
369
原创 idea搭建SSM框架
SSM框架（Spring+SpringMVC+MyBatis）<dependencies> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.0.1</version> </dependenc
2020-09-19 17:15:51
207
原创 变量、作用域和内存-《JavaScript高级程序设计》第四章读书笔记
变量、作用域和内存目录变量、作用域和内存1.基本类型和引用类型1.1动态的属性1.2复制变量值1.3传递参数1.4检测类型2.执行环境及作用域2.1延长作用域链2.2没有块级作用域1）声明变量2）查询标识符3.垃圾收集1）标记清除3.2引用计数3.3性能问题3.4管理内存1.基本类型和引用类型基本类型：简单的数据段引用类型：可能由多个值构成的对象在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。引用类型的值是保存在内存中的对象，js不允许直接访问内存中的位置，即不能直接操作对
2020-09-19 17:14:00
163
原创 虚拟DOM和性能优化-《React进阶之路》第五章读书笔记
虚拟DOM和性能优化1.虚拟Dom虚拟DOM是和真实DOM相对应的，是对结构化文本的抽象表达，即对HTML文本的抽象表达，虚拟DOM是建立在真实DOM上，对真实DOM的抽象，以解决DOM操作效率低下的问题使用普通的js对象来描述元素2.Diff算法React的调和过程：每次组件的状态和属性更新，组件的render方法都会返回一个新的虚拟DOM对象，用来描述新的UI结构，React会通过比较两次虚拟DOM结构的变化找出差异部分，更新到真实DOM上，从而减少最终要在真实DOM上的操作，提高执行过程，
2020-09-16 14:53:42
290
原创 深入了解React组件-《React进阶之路》第四章读书笔记
深入了解React组件《React进阶之路》第四章读书笔记1.组件state1.1设计合适的state组件state必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变都可以从state的变化中反映出来；同时，state还必须代表一个组件UI呈现的最小状态集，即state中的所有状态都用来反映组件UI的变化，没有多余的状态，也不存在通过其它状态计算而来的中间件//以下的state包含有个空数组，空数组的长度，以及数组中count的和，其中listCount和totalCount都不是必须的
2020-09-15 17:32:22
539
原创 Angular注意点
Angular数据绑定注意：<ul> <li ng-repeat="d in list" ng-click="a(d)"></li></ul>XXX.$scope.list=[ {checked:true], {checked:true}]fuction a(){ d.checked = !d.checked;}ng-cl...
2020-03-23 16:10:06
113
原创 angular的repeat排序问题
多个并列的循环序号连续HTML：<div ng-repeat="line in line_list" ng-init="pre_index = preIndex($index)" style="border:1px solid #000"> <div ng-repeat="item in line.item_list"> <span>
2019-01-07 15:04:26
908
原创 qrcode创建二维码
html：<head> <script src="js/qrcode.min.js"></script> <style> #qrcode{ width:100px; height:100px; } </style></head><body> <di
2018-11-20 10:39:43
497
原创 box-sizing的使用
HTML:<div class="box"></div>CSS.box{ box-sizing: border-box; /*box-sizing: content-box;*/ /*box-sizing: inherit;*/ width: 80px; background-color: #0055aa; margi...
2018-10-26 15:44:16
327
原创 :nth-child与:nth-of-type的区别
html:<div class="box"> <p>p</p> <p>p</p> <p>p</p> <div>div</div> <div&am
2018-10-11 11:29:02
174
原创 WebStorm常用快捷键
作用键盘组合在当前行上添加空白行ctrl + alt + enter在当前行下添加空白行ctrl + shift + enter复制当前行ctrl + d删除当前行ctrl + x折叠整页代码ctrl + shift + +展开整页代码ctrl + shift + -折叠代码ctrl + +展开代码ctrl + -...
2018-10-10 16:07:09
944
原创 jQuery获取特定子元素
没有id时，通过find查找$("."+ className).find("."+className).eq(i).css("display","none");
2018-09-11 09:38:05
11534
原创 Chrome中能获取到event, FireFox获取不到event的情况
Firefox中获取event,需通过参数传递event html:onclick = add(event);js:function add(event){ // Firefox中需通过参数传递event console.log(event);}AngularJs: html:onclick = add($event); // 在Firefox中必须要带$...
2018-09-06 17:45:03
1302
原创 替换标签名-两种
<div>换成<p>标签 html:<div> <div id="tag"></div></div><button onclick="changeTagNameOne (tag)">切换标签名</button><b
2018-09-06 08:35:52
1055
原创 获取一个区间内的随机整数
function backNum(n, m){ var random = Math.floor(Math.random()*(m-n+1)+n); return random;}backNum(1,4); // 3
2018-09-04 09:01:09
1766
原创 子元素不受父元素的透明度影响
使用background:rgba(1,1,1,0.5)&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;
2018-09-03 17:22:10
1343
原创 获取本地音视频设备
使用的是navigator.mediaDevices.enumerateDevices()方法 html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取本地音视频设备&
2018-08-22 16:26:41
1807
转载 微信小程序--富文本解析
下载并把wxParse放到小程序的目录中 下载地址 https://github.com/icindy/wxParse把wxParse放在与page同一级目录 wxParse里的emojis包是可要可不要的。1.引用wxParse1)在wxml中<import src="../../wxParse/wxParse.wxml" /><view class...
2018-08-17 15:51:01
1668
原创 保持div的宽高比
<div style="width: 100%;background-color: #255625;position: relative;padding-bottom: 44%">通过将padding-bottom这个属性设定为百分比(百分比为高/宽),从而保证div的宽高比高/宽 = 50%时,各种状态下的div框高/宽 = 100%时,各种状态下的div...
2018-08-17 10:18:14
2618
原创 语音声波图CSS
html端:<div class="liner-box"> <span class="lines"> <hr class="hr hr1"> <hr class="hr hr2"> <hr class="hr hr3">
2018-08-03 14:41:30
4312
2
转载 科大讯飞语音听写-前端JS
前端JS:(function (window) { //兼容 window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia...
2018-08-03 14:34:49
4355
3
原创 微信小程序：slider插件与音频的联动
.wxml:<!-- 播放区域 --> <view class='play-area'> <!-- <view class='play-line'> --> <view class='play-line-time1'>{{now_time?now_time:'00:00'}}</view> ...
2018-06-11 09:33:06
6003
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人