前端技术
积极向上的龙
这个作者很懒,什么都没留下…
展开
-
vue如何使用depcheck进行依赖检测
【代码】vue如何使用depcheck进行依赖检测。原创 2023-10-26 10:14:11 · 141 阅读 · 0 评论 -
黑白电视效果的404页面
【代码】黑白电视效果的404页面。原创 2023-08-23 10:03:14 · 87 阅读 · 0 评论 -
http-server使用
【代码】http-server使用。原创 2023-03-30 08:44:00 · 177 阅读 · 0 评论 -
Vue 全景图 photo-sphere-viewer的使用以及改变图片
Vue 全景图 photo-sphere-viewer的使用以及改变图片原创 2023-03-14 09:06:47 · 900 阅读 · 0 评论 -
JavaScript实现监控上传和下载进度
js实时监控上传下载进度原创 2022-07-05 13:30:00 · 2685 阅读 · 1 评论 -
通过css实现流式布局
-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid; /*break-inside: avoid; 避免元素内部断行并产生新列*/-moz-column-count: 2; /* Firefox */-webkit-column-count: 2; /* Safari or Chrome */column-count: 2; /* 将 div 元素中的文本分为2列,并规定列间1r原创 2022-05-06 11:37:46 · 502 阅读 · 0 评论 -
js事件循环机制微宏任务执行过程(超详细)
**1.js因为是单线程语言,为了避免阻塞设计出了事件循环机制2.js任务分为同步任务和异步任务,同步任务会放到主线程中,而异步任务会放入任务队列中3.异步任务分为宏任务和微任务,js会将宏任务放入宏任务队列中,微任务放入微任务队列中,第一轮先执行宏任务队列里面的任务,如果此时宏任务队列的其中一轮结束后,调用栈清空了,事件循环机制又发现微任务,并且会清空微任务队列,才会看一下需不需要渲染,此时将进入下一轮宏任务,如果最后微任务队列中没有微任务了,此时宏任务队列中还存在多个宏任务将会依次放入调用栈中进行执原创 2022-03-31 10:08:52 · 187 阅读 · 0 评论 -
js递归树,修改树的key
setTree (org) { const haveChildren = Array.isArray(org.children) && org.children.length > 0; return { //分别将我们查询出来的值做出改变他的key title: org.groupName, label: org.groupName, value: org.id, data: {...org},原创 2021-06-15 09:37:36 · 719 阅读 · 0 评论 -
微信小程序登入授权步骤
页面部分<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <image src='/images/1.jpg'></image> </view> <view class='content'> <view>申原创 2020-08-18 10:10:59 · 608 阅读 · 0 评论 -
前端网页优化
性能优化概述从输入 URL 到页面加载完成,完整的链路1.DNS 解析2.TCP 连接3.HTTP 请求抛出4.服务端处理请求,HTTP 响应返回5.浏览器拿到响应数据,解析响应内容,把解析的结果展示给用户整个性能消化http层面优化DNS 解析:DNS 实现域名到IP的映射。通过域名访问站点,每次请求都要做DNS解析。目前每次DNS解析,通常在200ms以下。一般采用DN...原创 2020-03-17 11:32:38 · 1791 阅读 · 0 评论 -
git常用命令和使用步骤
建立本地仓库git init查看用户名和邮箱地址:git config user.namegit config user.emailgit commit告诉Git,把文件提交到仓库git status来查看是否还有文件未提交第一步:是使用 git add 把文件添加进去,实际上就是把文件添加到暂存区。git add readme.txt(文件名)第二步:使用git c...原创 2019-12-03 15:15:50 · 1724 阅读 · 1 评论 -
js对数组几种常见的操作方法
第一:读取数组 for循环方法如下: var ay=[1,"sdsd","sdsd"]for (var i=0;i<ay.length;i++) {console.log("index:"+i+" "+ay[i]) //index:0 1 index:1 sdsd index:2 sdsd}第二:合并数组 concat方法如下:var ar...原创 2019-11-13 16:49:22 · 1816 阅读 · 0 评论 -
jq遍历数组返回一个新的属性名数组
var data2=[];data1.map((value,index,arry)=>{ data2.push({ 'name': value.latitude, 'value': value.longitude })})原创 2019-11-09 10:20:45 · 870 阅读 · 0 评论 -
js自动换算成rem
(function (doc, win, pwidth, prem) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = funct...原创 2019-10-19 09:51:45 · 616 阅读 · 0 评论 -
滚动下拉到底部的事件触发
//获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentEle...转载 2019-04-11 11:41:22 · 478 阅读 · 0 评论 -
html图片加载特效(预加载和加载失败)
调用的方法$(function () { $("img").delayLoading({ // defaultImg: "static/images/timg.gif", // 预加载前显示的图片 errorImg: "", // 读取图片...原创 2019-04-11 11:46:20 · 2314 阅读 · 0 评论 -
zTreed树形菜单的使用
demo结构需引入 <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/jquery.ztree.core.js"></script><script type="text/j...原创 2019-04-16 17:05:08 · 353 阅读 · 0 评论 -
icheck复选框美化插件的使用方法
两个文件的引入<link type="text/css" rel="stylesheet" href="static/flat/red.css"/><script src="static/js/icheck.min.js"></script>方法的调用//checkboxClass: 'icheckbox_flat-red',//radioClass...原创 2019-04-16 17:38:01 · 279 阅读 · 0 评论 -
artTemplate模板引擎用法
<!--用于展示模版的位置--><div id="area"></div> <script src="js/template-native.js"></script><!--用于存放模版--><script id="template" type="text/html"> <div>...原创 2019-05-30 15:36:29 · 127 阅读 · 0 评论 -
js导出table到Excel方法实现
js导出table到Excel方法实现<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title></head><body><div > <...转载 2019-05-29 11:16:58 · 271 阅读 · 0 评论 -
WebSocket学习案例
<!DOCTYPE html> <html lang="cn"> <head> <title>WebSocket chart application</title> <meta charset="utf-8"> <meta name="viewport" content="wi...原创 2019-07-31 20:36:30 · 164 阅读 · 0 评论 -
json字符串、json对象、数组 三者之间的转换
<script>//json字符串、json对象、数组 三者之间的转换 let jsonStr = '[{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"011","open":false,"pId":"01","...原创 2019-09-02 09:51:12 · 171 阅读 · 0 评论 -
时间戳转换成年月日的形式
timeFormate(timeStamp) { let year = new Date(timeStamp).getFullYear(); let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMon...原创 2019-09-02 10:00:01 · 3260 阅读 · 0 评论 -
bootstrap3-typeahead.min.js搜索框自动补全
需要引入bootstrap.js和css文件使用在搜索框加入data-provide=“typeahead” autocomplete="off"这两个属性<input type="text" value="" class="search-txt" placeholder="请输入产品名称或SKU" id="txtSkuName" data-provide="typeahead" aut...原创 2019-04-11 11:37:41 · 718 阅读 · 0 评论