- 博客(43)
- 收藏
- 关注
RSS订阅原创 previewImage.js实现图片放大预览，滑动切换，双指缩放，图片缓存
previewImage.js 实现的移动端图片的预览，缩放功能。
2023-08-15 10:04:37
1644
1
原创 Font Awesome 一套绝佳的图标字体库和CSS框架
Font Awesome是一套完美的图标字体库，供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
2022-08-31 15:26:59
368
原创 vue中@click点击阻止事件冒泡
大家都知道，vue中点击事件直接在元素中使用@click="click"即可，但是有时在一个元素中包含了子元素，而且父元素和子元素都有点击事件，此时我们希望的点击效果就是：点击子元素区域的的时候，不触发父级元素的点击事件，此时就要用到@click.stop=“方法名字”。@click.stop 阻止事件冒泡@click.prevent 阻止事件的默认行为<!-- 阻止单击事件继续传播 --><view @click.stop="方法名字"></view>..
2021-12-15 12:01:31
3731
原创 flexible.js淘宝官方h5移动适配解决方案
flexible.js淘宝官方h5移动适配解决方案.创建flexible.js , 主要内容为:;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexib
2021-11-02 14:30:30
715
转载 前端js获取当前时间的方法
var time = new Date();time.getYear(); //获取当前年份time.getFullYear(); //获取完整的年份(4位,1970-???)time.getMonth(); //获取当前月份(0-11,0代表1月)time.getDate(); //获取当前日(1-31)time.getDay(); //获取当前星期X(0-6,0代表星期天)time.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)time.getHours(); /
2021-09-28 11:10:12
7082
转载 js获取当前页面路由方法
在WEB开发中，时常会用到javascript来获取当前页面的url网址信息，在这里是我的一些获取url信息的小总结。下面我们举例一个URL，然后获得它的各个组成部分：https://blog.csdn.net/jia2799897415?spm=1000.2115.3001.53491.window.location.href(设置或获取整个 URL 为字符串)var test = window.location.href;alert(test);返回：https://blog.csdn.ne
2021-08-20 10:38:10
6969
转载 vue和微信小程序的区别
一、生命周期vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad: 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNav
2021-07-07 09:50:11
309
原创 js图片懒加载
html中内容，img的src放入懒加载的动态图，data-src中放入真实的图片。 <img src="懒加载的图片" data-src="真实图片" alt="">js代码,记得引入jQuery.js ，我没有封装js，你可以根据自己需求封装一个js文件 var clock; //这里的clock为timeID， //滚动区域， $('.container').on('scroll', function () {
2021-06-10 09:28:53
83
转载 Vue 项目性能优化方案
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成：Vue 代码层面的优
2021-05-28 09:40:03
256
转载 cli3 vue-router-----路由的配置及使用方法
一.什么是vue-routervue-router路由插件，这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。二.vue-router安装npm install vue-router --save-dev三.在src文件夹中创建routes.js配置文件，配置路由的映射关系import ShowBlog from "./components/ShowBlog"import AddBl
2021-05-26 10:41:43
278
转载 Vue-cli3如何添加路由（vue-router）
之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下：安装路由npm install vue-router创建router.js与main.js同级router.js中的内容为import Vue from 'vue'import Router from 'vue-router' //组件模块import Main from './components/content/ma
2021-05-26 09:45:07
413
原创 vue-cli3.0 中 关闭 eslint 验证,关闭代码检测工具
删掉package.json中的"eslint:recommended"即可；然后重启项目就可以了
2021-05-21 09:21:37
442
转载 vue实现移动端适配方案 （amfe-flexible和postcss-pxtorem结合）建议收藏
1.amfe-flexibleamfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。2.postcss-pxtorempostcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。3.移动端适配方案vue实现移动端适配步骤如下:先安装amfe-flexible和postcss-pxtoremnpm install amfe-flexible --savenpm install postcss-pxtorem --save在m
2021-05-14 09:45:46
874
转载 模仿微信朋友圈 图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
首先引入一下两个js文件，<script src="dist/md5.js"></script><script src="dist/previewImage.min.js"></script>整个HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PreviewImage&l
2021-05-07 09:43:45
692
原创 input上传视频并本地预览
<input id="uploaderInput" class="weui-uploader__input" onchange="chooseVideoInput()" accept="video/*" multiple="" type="file"><video src="" controls id="video" style="width: 8rem"></video> <script> function chooseVideoIn
2021-04-27 16:53:33
3312
原创 css编辑段落文章，段落变得好看些
直接给p标签样式（移动端和PC端通用） p{ margin:1em 0; padding:0 0 0 2em; text-indent:-1.5em; font:normal normal 16px/1.6em "宋体"; color:#000; }
2021-04-07 09:47:48
673
原创 CSS3实现图片在DIV中上下左右居中
CSS3实现图片在DIV中上下左右居中<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3实现图片在DIV中上下左右居中</title> <style> .container{width:600px;height:600px;border:1px solid red;position: relative;}
2020-12-23 10:22:13
842
转载 微信设置字体很大 - 导致公众号页面布局错乱的解决方案
IOS解决方案：body{ -webkit-text-size-adjust: 100% ;}安卓解决方案：通过 WeixinJSBridge 设置网页字体为默认大小，并禁止用户自定义缩放页面 (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else {
2020-12-15 10:36:05
1799
原创 js遍历单选框和多选框必填选项
js遍历单选框和多选框必填选项var dx15=KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲15 .weui-cells_…(’#15 .weui-cells__title’).get(0).getAttribute(‘data-id’)-1 //获取第一题第一个的id 因为下面遍历是从一开始的所以要减一for(var j=1;j<=dx15;j++){var cid=Number(j)+Number(topic1
2020-12-03 11:19:37
752
转载 新手购买阿里云服务器如何选择配置，阿里云服务器配置推荐
很多新手用户在购买阿里云服务器的时候纠结于云服务器配置到底应该怎么选？下面针对目前主要的个人和企业网站类型做一个配置推荐（仅个人意见），对于新手用户来说，如果不知道如何选择自己的阿里云服务器配置，可以参考以下推荐购买：一：普通的个人小型网站，个人博客等小流量网站可选择低配置的阿里云服务器推荐配置：CPU：1核、内存1G或2G、硬盘40G、带宽：1M或2M二：论坛、门户类网站论坛、门户类网站，用户活跃性与访问量较高，需要有足够的服务器资源空间和带宽，提升访问速度。推荐配置：CPU：2核、内存：4G
2020-08-13 17:26:12
2682
原创 js使导航吸顶
直接使用下面方法即可，导航的ID命名为nav// An highlighted block//吸顶 window.onload = function() { var nav = document.getElementById("nav"); //获取页面nav元素 var navTop = nav.offsetTop; //获取nav距离顶部的距离 //滚动条滚动时执行函数 window.on
2020-08-13 09:55:31
213
转载 微信小程序上拉加载：onReachBottom详解+设置触发距离
前端经常遇到上拉加载更多的需求，一般还涉及到翻页。小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多，有需要的直接看代码，有详细注释：1、首先在data里定义一下返回数据data,和翻页的页数pagenum data: { datalist: [], //.wxml文件需要绑定的列表，我这里用的数据类型是数组 pagenum: 1, //初始页默认值为1 },2、具体的请求过程，包含新老数据的数组合并，实现数据实时更新g
2020-08-06 14:57:01
2533
原创 微信小程序页面之间传值
js文件里面//点击视频跳转到详情页 page:function(event){ var postid=event.currentTarget.dataset.sss; //获取传的id console.log(postid) wx.navigateTo({ url: '/pages/video_detail/video?id='+postid, events:{ // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
2020-08-06 12:02:15
354
原创 微信小程序navigator和tabBar一起使用时，navigator无效解决方法
1.当注册了tabBar的时候，使用navigator时会发现不能跳转，这个时候需要在navigator上加上open-type=’switchTab’ 属性跳到index2.当未注册tabBar的时候，navigator可正常使用，默认即可。3.wx.redirectTo(OBJECT) 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数...
2020-08-05 11:42:03
715
1
原创 微信小程序开发，app.json 文件全局配置参数
全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置参考以下文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
2020-08-04 11:15:25
919
原创 css垂直居中图片
使用flex完成垂直居中操纵css flex实现垂直居中。flex或许不是完成垂直居中最好的选择，由于IE8,9其实不赞成它。那时，为了用flex实现垂直居中，我们起首要竖立一个包裹着图片的div元素，日后给它定义一些根基属性。HTML代码部份：<div class="flexbox"><img src="1.jpg" alt=""></div>CSS代码一部分：body{ background:#999}.flexbox{width: 300px;h
2020-07-31 11:38:40
95
原创 js追加的class点击效果没有生效解决方法
//这样写没有效果$(".xx").clcik(function(){····}); //改成这样写$(document).on('click', '.xxx', function(e){});
2020-07-29 12:06:47
827
原创 jquery-读取form表单中的所有数据列表，不用再一 一获取
<script>$(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); $.each(t, function() { d[this.name] = this.value; }); alert(JSON.stringify(d)); });});</script><form>
2020-07-28 14:54:41
730
原创 js点击页面出现爱心
废话不多说，直接将下面的js代码放入界面中即可：//点击页面出现爱心 (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitR
2020-07-21 15:49:42
1289
原创 js强制保留两位小数，不足用0补齐
超过位数的直接截取，采用四舍五入（若不采用四舍五入，截取2位，则把Math.round改为Math.floor）例如：2 → 2.002.3 → 2.302.321 → 2.322.328 → 2.33代码如下：function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { return 0; }
2020-07-17 16:39:14
1125
原创 微信小程序底部导航栏配置
底部导航栏这个功能是非常常见的一个功能，基本上一个完成的app，都会存在一个导航栏，那么微信小程序的导航栏该怎么实现呢？经过无数的踩坑，终于实现了，好了，先看看效果图。对于底部导航栏，小程序上给出的文档要求里面的item最少2个，最多五个。好了，先看看代码：在项目中找到这个文件 1 { 2 "pages":[ 3 "pages/index/index", 4 "pages/logs/logs", 5 "pages/mine/mine" ...
2020-07-17 09:52:35
1187
转载 使用 vue init webpack 项目名 创建项目
检测node和npm的版本使用vue init webpack 项目名称创建项目切换到项目文件下面通过npm run dev运行项目如果报错说'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件，就npm install安装package.json文件中的所有依赖模块。在浏览器中打开生成链接的网页，查看项目生成是否成功如果安装成功，打开链接后就是上图呈现的样式。项目文件解析...
2020-07-16 15:14:59
487
转载 微信小程序开发中用到的标签及详解
在进行微信小程序开发过程中，遇到了不少问题，现在总结一下，刚开始写小程序页面时经常会使用h5中的一些标签导致页面有问题，现在总结一下小程序中的标签和标签对应的属性。标签1、viewview是盒模型，默认display:block。盒模型在布局过程中，一般推荐display:flex的写法，配合...
2020-07-16 08:50:30
1740
原创 js 实现历史搜索记录功能
废话不多说，上代码：html css就不展示了{{--历史搜索--}} <div class="hot-keyword history"> <div class="title_keyword">历史搜索</div> <ul class="keyword_list history_list"> </ul> </div>js：最原始的js代码，没有经过优化的，你可
2020-07-14 16:19:51
2610
原创 前端框架都有哪些
一、bootstrapbootstrap简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。官网地址：https://www.bootcss.com/二、Mint UIMint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。官网：https://mint-ui.github.io/#!/zh-cn三、WeUIWeUI+是Zepto1.2和WeUI 2.0为基础,收集整理了上百个组件开发而成,兼容IOS和
2020-07-09 15:02:31
1715
原创 js 选中的导航居中 两边除外
html<div class="nav-arc"> <div class="nav"> <ul class="nav-list"> <li onclick="window.location.href='/video?tid=0'">全部</li> <li onclick="window.locati
2020-07-09 09:47:14
217
转载 input type = file上传图片限制大小、类型判断、像素判断
在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。下面展示一些 代码片段。<input type="file" name="files" id="file" onchange="verificationPicFile(this)">//图片类型验证
2020-07-02 10:33:20
3423
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人