- 博客(15)
- 收藏
- 关注
RSS订阅原创 CSS动画圆点波浪wave动画
<div class="box box1"></div><div class="box box2"></div><div class="box box3"></div>CSS.box { width: 9px; height: 9px; background: greenyellow; margin: 100px 10px; border-radius: 50%; float: left; anim..
2021-02-25 11:25:49
536
原创 VUE监听数组变化，答题后相关题号实时变化
vue官网：由于 JavaScript 的限制，Vue 不能检测以下数组的变动：1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue2.当你修改数组的长度时，例如：vm.items.length = newLength举个例子：var vm = new Vue({ data: { items: ['a', 'b', 'c...
2019-09-03 11:05:03
651
原创 location.search值为空?
window.location和document.location互相等价的，可以交换使用。一个url链接中包含’#‘和不包含’#'有些返回结果是有区别的，如下：属性含义http://abc.com:8080/test?a=1&b=2http://abc.com:8080/#/test?a=1&b=2href当前页面的完整URLhttp://abc....
2019-03-27 10:03:05
1711
原创 理解JS中的this
先来说this的两个误解：1.this指向自身因为英文语义的关系，很多人把this理解成指向函数自身，this是在运行时绑定的，不是在编写时绑定的，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有关系，只与函数调用的顺序相关。this是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。（默读3遍）理解this的调用位置 function ba...
2018-12-02 22:44:03
529
原创 inline-block对齐，设置inline-block元素内容不同位置相互影响原因
对两个并列元素设置了display: inline-block; 以为他们的位置是这个样子结果确是这个样子：我们来看一下这个div的界限发现，左边图片贴在div的顶部，右边气泡并没有贴着div的顶部，解决方法：给两个inline-block元素加上以下属性：vertical-align:top;问题解决了，我们来思考为什么回出现这个问题，发现两个设置为inline-block的...
2018-11-14 17:07:08
7676
2
原创 换个思路：CSS实现一个对号
一直以来对号的引用都是用图标库，换个思路来实现一下，CSS的伪类还是很强大的。<span class="check" />.check{ position: relative; display: inline-block; width: 16px; height: 15px; margin: 0 10px;}.check::after{ c...
2018-11-10 23:13:29
3135
原创 CSS渐变色边框，解决border设置渐变后，border-radius无效的问题
需求：用css设置渐变边框通过border-image来实现渐变色边框&amp;lt;div class=&quot;content&quot;&amp;gt;&amp;lt;/div&amp;gt;.content { width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-line
2018-11-01 13:19:27
71019
8
原创 实现浏览器兼容版的inline-block显示
display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，比如：span,a,lable,cite,em等标签. 如何实现块级元素(div,p,h1,form,ul等)的inline-block效果? 解决办法如下：display: inline-block;*display: inline;*zoom: 1;通过 *zoom: 1;
2017-09-20 11:34:26
464
原创 实现浏览器兼容版的element.children
element.children能够获取元素的元素子节点，但是低版本的ie不支持，兼容实现：//声明一个函数,可以完成element.children相似的功能 function getChildElementNodes(element) { //第一步是条件语句来判断浏览器是否支持element.children属性 //如果支持呢，
2017-08-29 21:20:39
1912
原创 JSON.stringify兼容
方法一：html文件的head头内引入json2.js文件来解决：<script src="https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js"></script>方法二：if (!window.JSON) { window.JSON = { stringify: functio
2017-08-28 10:56:56
1434
原创 JS正则表达式：量词的贪婪模式与惰性模式的区别
在说明贪婪模式与惰性模式区别之前，说明一下JS正则基础： 1.写法法基础： regexObj.test(str)；例如/123/.test(‘123’); 2.基本语法 锚点：匹配一个位置 ^表示起始位置；/^a/.test(‘str’);表示是否以a开头 表示结尾位置；/\.jpg表示结尾位置；/\.jpg/.test(”); \b表示单词边界；/\bis\b/表示单词is 字符类
2017-08-26 23:32:21
745
原创 canvas实现图片旋转缩放
canvas实现图片旋转，用到的基本函数： rotate（）实现旋转； scale（X,Y）实现缩放，X代表水平缩放，Y代表垂直缩放； translate（X,Y）为画布的变换矩阵添加水平的和垂直的偏移；基本思路：用rotate（）方法实现图片旋转，用scale（）实现缩放。rotate（）旋转的时候是以左上角为顶点进行旋转，如果想以图片中心为定点旋转，用translate（）将点定位到图片中
2017-07-10 21:21:08
5284
原创 canvas实现图片围绕左上角一点进行旋转
canvas插入图片，需要先在onload事件中预加载图片，然后在用drawImage（）方法插入图片。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="逆
2017-07-04 10:40:53
1628
原创 查找带回
经常用到的查找带回，通过window.open（）打开新页面，然后在子页面window.opener方法将选中的值传递给父页面。 兼容谷歌，火狐，IE7 父页面parent.html,代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <scrip
2017-02-23 14:14:08
1742
原创 百度富文本编辑器ueditor的使用、非空校验、引用预定义模板
最近用到百度ueditor编辑器，遇到了很多问题，总结一下ueditor的使用、非空校验、引用预先写好的模板。 一、百度ueditor编辑器简单使用： 1.在百度官网http://ueditor.baidu.com/website/download.html下载压缩包，解压之后整体拷到项目目录下。 2.在页面上引入两个js文件<script src="ueditor/ueditor.confi
2016-12-19 22:14:22
10149
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人