![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
lunaliuuuuu
这个作者很懒,什么都没留下…
展开
-
大屏页面适应不同分辨率的屏幕 transform
大屏自适应原创 2022-08-23 17:22:40 · 532 阅读 · 1 评论 -
珂珂吃香蕉 (js) 二分
日常记录算法面试题,方便后续复习珂珂喜欢吃香蕉。这里有 n 堆香蕉,第 i 堆中有 piles[i] 根香蕉。警卫已经离开了,将在 h 小时后回来。珂珂可以决定她吃香蕉的速度 k (单位:根/小时)。每个小时,她将会选择一堆香蕉,从中吃掉 k 根。如果这堆香蕉少于 k 根,她将吃掉这堆的所有香蕉,然后这一小时内不会再吃更多的香蕉。珂珂喜欢慢慢吃,但仍然想在警卫回来前吃掉所有的香蕉。 返回她可以在 h 小时内吃掉所有香蕉的最小速度 k(k 为整数)leecode链接:https://leetcode.原创 2022-05-13 14:59:26 · 113 阅读 · 0 评论 -
打开浏览器后px自动转换为rem(vue)postcss-pxtorem
yarn add postcss-pxtorem 安装打开package.json文件是否安装成功 “postcss-pxtorem”: “^5.1.1”,新建rem.js文件 (function (win) { var docEl = win.document.documentElement; var time; function refreshRem() { var width = docEl.getBoundingClientRect().widt.转载 2022-01-16 19:40:21 · 405 阅读 · 0 评论 -
页面渲染后,重置DOM相关样式的“新思路”
页面渲染后,除了用 document.body.clientWidth 获取屏幕网页可见区域宽高…还可以尝试使用getComputedStyle,此属性能获取DOM对应的CSS属性值。//给html重置字体大小setFontSzie() { if (!this.initSize) { this.initSize = window.getComputedStyle(document.body).getPropertyValue("font-size"); //getPropertyVal原创 2022-01-16 19:11:43 · 385 阅读 · 0 评论 -
利用Vue和Echarts实现双层tab嵌套的 柱状图
从接到任务到动手实践,它一直是一个随随便便给我绕懵的存在。谨以此博,记录结果,避免之后再走弯路。先看实现结果:由于4个图布局一模一样,只有数据源不一样,所以我选择在父组件,引入子组件4次,并在父组件获取数据传给子组件,此操作忽略。下面为子组件的代码: <div class="targetcon " v-for="(item, index1) in this.datas" :key="index1"> <div class="topictitle">原创 2021-11-26 14:25:14 · 1357 阅读 · 0 评论 -
vue用axios调用本地json数据一直报404 避坑
报错信息原因本地json文件一定要放在public下的同时,需要新建一个文件夹(如:js)将json文件放在js文件夹中,即可饮用组件代码axios.get('/js/aaa.json') .then((val => { this.test = val.data console.log(this.test) }))},...原创 2021-10-11 17:11:53 · 566 阅读 · 0 评论 -
静态页热更新
写静态页面的时候,难免要一直刷新页面查看样式和效果。可以使用Browsersync插件,快速响应文件修改。条件:本地有Node.js用法://安装npm install -g browser-sync //启动//如果您想要监听.css文件, --files 路径是相对于运行该命令的项目(目录)browser-sync start --server --files "css/*.css" //如果您需要监听多个类型的文件,您只需要用逗号隔开browser-sync start --原创 2021-07-29 14:18:02 · 113 阅读 · 0 评论 -
解决页面加载时,轮播图加载过慢导致的抖动感
1. 不考虑兼容问题(移动端).wrapper{ width: 100% height: 30vw; //viewport}2. 考虑兼容问题.wrapper{ overflow: hidden width: 100% height: 0 padding-bottom: 30% //30% 为轮播图高度占宽度的比例}...原创 2021-03-07 19:10:48 · 1021 阅读 · 0 评论 -
ajax回传参数
(function(){ if(recommend != null && recommend != "" && typeof(recommend) != "undefined") getAjaxRecommend(recommend,recommendName);})//页面设置每页显示条数 function getAjaxRecommend(recommend,recommendName){ var url = local_host + "/recom.原创 2020-10-23 15:30:18 · 232 阅读 · 0 评论 -
Jquery显示当前时间的方法
在网上搜到了一个获取当前时间的方法,改造了一下,适应了双语显示同时,时间每秒都会跟着改变。如果有更简洁的办法,欢迎评论讨论告知。<p class="date-con" ></p>$(function(){ //时间 setInterval(function(){ $(".date-con").showCurrentTime(); },1000)})//动态的显示当前时间;(function($){ "use strict"; var原创 2020-10-12 13:45:10 · 1517 阅读 · 0 评论 -
jquery实现页内搜索、css实现页内排序
jquery实现页内搜索、css实现页内排序原创 2020-09-30 17:32:46 · 246 阅读 · 2 评论 -
满屏飞飘窗js
//调用<div id="fw">飘窗内容</div><script> var fw=new AdMove("fw"); fw.Run(); </script>源码:可封装为插件使用function addEvent(obj, evtType, func, cap) { cap = cap || false; if(obj.addEventListener) { obj.addEventListener(evtType原创 2020-09-15 13:52:38 · 391 阅读 · 0 评论 -
JavaScript模拟触发事件
开发的时候遇到一个需求,点击一个a标签,下载某一个文件,同时记录下载次数。由于需要记录次数,所以不能用直链的方式,需要模拟一个点击事件。上代码<a href="javascript:void(0);" onclick="downloadImg('图片id','文件类型')">下载图片</a>function downloadImg(id,type){ var url = local_host+"article/exportImg?id="+id+"&type="+t原创 2020-09-01 09:17:59 · 279 阅读 · 0 评论 -
当CDN无法访问时,访问本地文件方法
//判断一个url是否可以访问 function IsLoad(_url,fun){ $.ajax({ url:_url, type:"post", complete:function(data){ //说明请求的url存在,并且可以访问 if(data.status == 200) { fun(true); } else { fun(false); } }, });.原创 2020-08-28 14:35:18 · 402 阅读 · 0 评论 -
Angular Js 方法总结
1.页面需写内联背景(background)<div class="pic" ng-style="setStyle(news.imagePath)"></div> $scope.setStyle = function(bg){ return {"background":"url(" + bg + ") no-repeat center center"} }2. 字符串截取//用于处理数据中带有html标签的渲染text:文本,max:展示长度0为原创 2020-08-10 17:08:21 · 438 阅读 · 0 评论 -
关于banner 轮播图的总结记录 js
本文主要记录在工作中常用的做轮播图的方法,以插件为主。原创 2020-08-04 11:05:42 · 742 阅读 · 0 评论 -
利用swiper2实现轮播图两侧显示前后屏的虚影
效果图:var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, autoplay:4000, loop:true, loopedSlides :2, loopAdditionalSlides : 2, //loo...原创 2019-12-31 19:34:35 · 1798 阅读 · 1 评论