- 博客(107)
- 资源 (4)
- 收藏
- 关注
原创 设置文字两边对齐
设置文字两边对齐1.css.text-justify{ text-align-last: justify; text-align: justify; text-justify: distribute-all-lines;}
2021-04-16 15:50:26 253
原创 js字符输入效果
js字符输入效果1.html<div id="code" class="content"> <p>相遇、相识、相知、相伴</p> <p>往后余生,请多指教</p></div>2.jsvar typewriter = function(e) { e.each(function() { var $ele = $(e), str = $ele.html(), progress = 0; $.
2020-05-22 16:52:14 403
原创 仿微信文本框,自动换行,动态高度,最大四行后滚动
仿微信文本框,自动换行,动态高度,最大四行后滚动原理:js监听textarea实时变化值,将textarea内容插入到一个和textarea相同大小的div中,且各属性相同,高度除外;之后将根据div的高度来给textarea的高度赋值,超出四行的高度时不再给textarea赋值;当监听到textarea内容只有4个回车符号时,截断内容;注意当textarea最后字符为回车时特殊处理高度。...
2020-04-29 16:13:01 898
原创 添加、获取、删除、清空全部cookie缓存数据
添加、获取、删除、清空全部cookie缓存数据1.添加$.cookie('keys', "11");$.cookie('user_id', "1113", { path: "/"});$.cookie('user_name', "张三", { path: "/", expires: 30});2.获取console.log($.cookie('keys'))co...
2020-04-29 11:36:01 1358
原创 css实现高斯模糊效果
css模糊效果1.css -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
2020-04-13 10:50:58 2004
原创 根据生日判断是否大于18岁
根据生日判断是否大于18岁1.js /* * 判断平年闰年 * y:年份数字,四位 * */ function isOrdinaryYear(y) { if ((y % 4 === 0 && y % 100 !== 0) || y % 400 === 0) { return false } return true; } /* * 判...
2020-03-23 19:13:44 1622
原创 微信小程序压缩图片并上传
微信小程序压缩图片1.wxml<canvas class="canvas" style="width: {{cw0}}px; height: {{ch0}}px;" canvas-id="myCanvas0"></canvas>2.jsPage({ /** * 页面的初始数据 */ data: { scale: 0.5, cw0: ...
2020-03-15 15:35:58 2648
原创 js计时时分秒
js计时时分秒1.jsvar TimeBar = { timer: 0, hour: 0, minute: 0, second: 0, dateContent: "00:00:00", creatHtml: function() { var content = '<p class="timeBar">' + TimeBar.dateContent + '<...
2019-12-17 16:01:57 961
原创 if (! +"\v1")什么意思?
if (! +"\v1")什么意思?if (! +"\v1")判断是否为IE浏览器。IE里不能把 "\v" 处理成垂直符,所以在IE里它就是表示"\v"这个字符串,所以"\v1"为字符串。前面的+号把后面的字符串转换成数字,由于"\v1"在IE里为字符串,所以 +"\v1" 转换失败,其值为NaN。所以 !+"\v1"的值为 true,所以在IE里 if(!+"\v1")。(目前...
2019-12-05 16:14:24 770
原创 clearInterval不起作用?肯定是用法不对
clearInterval不起作用?肯定是用法不对1.场景当一个定时器可能会被多次调用的时候,只清理一次肯定会出现没有清理完全的情况,这时候给你的错觉就是“clearInterval不起作用”。2.用法var timer = null;var timerList = [];function intervalStart() { intervalEnd(); timer =...
2019-12-03 15:40:18 14608 2
原创 window.close()失效
window.close()失效1.Chrome以及其他浏览器window.opener = null;window.open(' ','_self');window.close();2.Firefoxwindow.open("about:blank", "_self").close();
2019-11-14 14:33:17 1215
转载 js一切皆对象
一切皆对象咱们经常听到JS中“一切皆对象”? 有没有问想过这是什么意思? 其它语言也有“一切皆对象”之说,如Python。 但是Python中的对象不仅仅是像JS对象这样的存放值和值的容器。Python中的对象是一个类。 JS中有类似的东西,但JS中的“对象”只是键和值的容器:var obj = { name: "Tom", age: 34 }实际上,JS中的对象是一种“哑”类型...
2019-10-15 14:24:08 607
转载 为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅
转载:https://juejin.im/post/5da29a87518825094e37301c?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅导 读vue3.0中,响应式数据部分弃用了Object.defineP...
2019-10-15 13:38:56 885
原创 什么是FOUC?如何避免FOUC?
什么叫做 FOUC 浏览器样式闪烁这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.在引用css的过程中,如果方法不当或者位置引用不对,会导致某些页面在windows下的ie出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称FOCU原因大致为:1,使用import方法导入样式表;2,将样式表...
2019-10-11 11:06:28 1744
原创 css实现骨架屏
css实现骨架屏1.css@-webkit-keyframes skeleton-ani { 0% { left: 0 } to { left: 100% }}@keyframes skeleton-ani { 0% { left: 0 } to { left: 100% }}.skt-loading .skeleton { positi...
2019-09-20 14:11:49 2264
原创 在 HBuilderX 中怎么配置使用 Git?
在 HBuilderX 中怎么配置使用 Git?(1)安装终端;工具——插件安装——内置终端、git(2)下载安装 Git;(3)配置 Git,即配置环境变量安装完Git后,首先右单击弹出快捷菜单——属性;打开计算机系统——单击“高级系统设置”选项;系统属性里单击选择——环境变量;选择 PATH——新建;新建;确定。(4)右键你的项目...
2019-09-11 17:59:29 5147
原创 JS前端渲染大批量数据
前端渲染大批量数据这里会提出三种方法<ul></ul>1.最简单的const number = 99999;let ul = document.querySelector("ul");for (var i = 0; i < total; i++) { let li = document.createElement('li'); ...
2019-09-11 16:18:25 8986 2
原创 div模拟input/textarea实现输入文字图片
div模拟input/textarea实现输入文字图片1.css.div-edit { font-size: 15px; width: 100%; height: 40px; line-height: 20px; padding: 10px 15px; border: 1px solid #9f9f9f; border-radius: 8px; margin: 0; d...
2019-09-10 13:24:51 1302
原创 js获取ip地址等
js获取ip地址等1.引入外部js文件http://pv.sohu.com/cityjson?ie=utf-82.调用<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script"> console.log(returnCitySN);</script&...
2019-09-05 18:57:04 378
原创 iframe+postMessage实现跨域通信
window方法:postMessage()该window.postMessage()方法安全地启用Window对象之间的跨源通信;例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间。通常,当且仅当它们源自的页面共享相同的协议、端口号和主机(也称为“同源策略”)时,允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规...
2019-08-22 10:57:45 488
原创 HTML5新特性
新特性HTML5 中的一些有趣的新特性:用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search1.语义标签标签 描述 <...
2019-07-25 16:12:03 523
原创 js 数组中的常用事件
js 数组中的常用事件 var oldArray = [{ name: "李晨", age: 21 }, { name: "王晓", age: 22 }, { name: "赵四", age: 23 }];目录js 数组中的常用事件1.添加2.删除...
2019-06-24 14:57:47 926
原创 html中禁止文字被选中
html中禁止文字被选中user-select:none |text| all | element取值:none:文本不能被选择text:可以选择文本all :当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。element:可以选择文本,但选择范围受元素边界的约束说明:1.IE6-9不支持该...
2019-05-23 16:11:38 28058
原创 vue.js上拉加载
vue.js上拉加载注意事项:1.overflow属性会导致滚动事件失效2.连续下拉会导致数据加载时出现问题,给了1s的延迟<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...
2019-05-08 11:04:28 1272
原创 js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery、jquery.qrcode.min.js1.html<div class="qrcode"></div><button onclick="downloadClick()">下载二维码</button>2.js2.1生成二维码var url = window....
2019-04-23 16:45:08 6211 1
原创 什么是Ajax以及ajax请求的步骤
什么是Ajax以及ajax请求的步骤1.Ajax是什么?Asynchronous JavaScript & XML。Ajax是web开发的一种技术。2.Ajax请求的步骤(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象;(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息;(3)设置响应`HTTP`请求状...
2019-04-18 15:56:10 15134
原创 vue脚手架搭建以及常见问题(附解决方案)
vue脚手架搭建以及常见问题(附解决方案)node.js安装后1.全局安装vue-clinpm install -g @vue/cli2.生成项目名为projectName的模模板vue init webpack projectName 3.安装依赖npm install4.运行npm run dev 5.路由npm install...
2019-04-17 11:26:22 2984
原创 css变量
css变量1.html<body> <header id="main-header"> <h1>css 变量</h1> </header> <div class="container"> <div class="grid"> ...
2019-04-17 11:13:34 229
原创 前端常见知识总结
前端常见知识总结1.盒模型盒模型由margin、border、padding、content组成。盒模型有两种标准,一个是标准模型,一个是IE模型。标准盒模型的宽高只是内容(content)的宽高,而在IE中盒模型的宽高为边框(border)+填充(padding)+内容(content)的总宽高。2.sessionStorage、localStorage和cookie的区别共同点...
2019-03-26 09:23:08 441 1
原创 在vue中引入内部css文件
在vue中引入内部css文件1.新建base.css文件,目录:assets/css/base.css2.在main.js中写:import './assets/css/base.css';(此时会报错,需要安装依赖)3.安装依赖npm install style-loader --save-devnpm install css-loader --sa...
2019-03-06 10:51:35 4751 1
原创 js禁止图片拖动
js禁止图片拖动 1.js for (i in document.images) document.images[i].ondragstart = imgdragstart; function imgdragstart() { return false; };
2019-01-23 11:29:11 3029
原创 js判断数组中对象是否存在某个值
js判断数组中对象是否存在某个值var arr = [{ name: "回锅肉", value: "0"}, { name: "小炒肉", value: "1"}]var result = arr.some(function(item) { if (item.name == "小炒肉") { return true; }...
2019-01-16 10:02:28 23346
原创 js调用angularjs内部方法,$scope.$apply()强制更新
js调用angularjs内部方法,$scope.$apply()强制更新1.html<div id="food" ng-cloak ng-app="food" ng-controller="FoodCtrl"> <button type="button" onclick="isShow()">点击</button&
2019-01-15 13:37:13 2634
原创 angularjs和vue.js实际运用对比
1.angularjs和vue.js在初始化防止代码闪烁的指令1.1.angularjs在页面最外层div写上v-cloak,并且增加一个class——“ng-cloak”<div class="ng-cloak" ng-cloak ng-app="app" ng-controller="AppCtrl"></div>.ng-cloak { ...
2019-01-14 16:23:14 1168
原创 在ng-repeat 中使用 ng-click不起作用
在ng-repeat 中使用 ng-click不起作用 在angular 中使用 ng-repeat 过程中,有时需要绑定click事件 ,这时候会想到使用ng-click ,但是并没有效果;此时应该使用 data-ng-click 替代 ng-click ,并且绑定的时候也不需要 {{}}.比如:<div ng-repeat="item in tabbar...
2019-01-14 13:21:22 2165
原创 js数组求和的方法
js数组求和的方法var array = [1, 2, 3, 4, 5];var sum = 0;1.for循环 for (let i = 0; i < array.length; i++) { sum += array[i]; }2.forEach array.forEach(ele => { sum ...
2018-12-25 15:15:31 42367
原创 js数组排序
js数组排序 var values = [5, 10, 0, 15, 1, 20]; console.log(values.sort()); //[0, 1, 10, 15, 20, 5] //sort()方法根据测试字符串的结果改变原来的顺序。 //因为数值 5 虽然小于 10,但在进行字符串比较时, "10"则位于"5"的前面,于是数组的顺序...
2018-12-21 13:58:53 924
原创 根据数组中对象的某一属性排序
根据数组中对象的某一属性排序var newArray = [{ name: "aaa", value: 0},{ name: "ddd", value: 3},{ name: "bbb", value: 1},{ name: "eee", value: 4},{ name: "ccc", valu...
2018-12-19 17:53:14 770
原创 移动端图片上传:localResizeIMG先压缩再ajax上传
移动端图片上传:localResizeIMG先压缩再ajax上传 下载https://github.com/think2011/localResizeIMG/archive/4.9.35.zip,之后引入以下几个js文件以及jquery.js1.html<div class="feedback"> <div class="mui-col-xs-12 mui...
2018-12-17 17:04:13 301
textarea.zip
2020-04-29
iframe+postMessage实现跨域通信
2019-08-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人