文章列表
学习日志学习美文随记
 

css3 新特性 calc 学习

发布时间：2023/8/19 11:41:52 阅读(711)条评论(0)条

css3 新特性 calc 学习Calc是CSS3中的一个非常有用的新特性，它允许开发者在样式中使用数学运算，从而更灵活、更高效地控制布局。这篇文章将介绍Calc的语法以及如何在实际项目中使用它。语法Calc函数的语法非常简单，它只有一个参数，表示要进行数学计算的表达式。这个表达式可以包含数字、运算符、变量以及测量单位。具体的语法如下：calc(expression)表达式可以是一个简单的数学运算，比如：width: calc(100% - 50px);这个例子中，我们用100%减去50像素，得到一个动态的宽度。当屏幕大小变化时，这个宽度也会自动调整。除了加减乘除这些基本的数学运算符，Cal...未完，继续阅读→
关键字：css3calc

非常详细的Vue安装与配置教程

发布时间：2023/4/22 14:05:49 阅读(1569)条评论(0)条

非常详细的Vue安装与配置教程Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下一、下载和安装Vue官网下载地址Download | Node.js选择适合自己的版本，推荐LTS，长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit下载好后，双击下载的安装包。点next勾选I accept............，点next 这里建议更改为自己想要的的安装目录，然后点next（可以自己先建好安装目录，我这里是提前建好的一个目录：E:\J...未完，继续阅读→
关键字：Vue教程node

用css修改svg图标的的颜色

发布时间：2022/8/9 9:34:36 阅读(2949)条评论(0)条

用css修改svg图标的的颜色方式一：利用drop-shadow给icon加样式 (利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter: drop-shadow(red 80px 0); transform: translateX(-80px); 给父元素加样式 （父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域） overflow:hidden;<div class="svg"> <img src="./loading.svg" class="svg-color"></div>//css.svg { width: 30px; height: 30px; overflow: hidden;}.svg-color { transform: translateX(30px); filter: drop-shadow(...未完，继续阅读→
关键字：svg颜色图标

javascript如何判断浏览器是否安装某插件

发布时间：2022/7/9 9:28:18 阅读(3550)条评论(0)条

javascript如何判断浏览器是否安装某插件chrome测试环境：102.0.5005.63方法有多种，这里就做了两种方案：1. 检测扩展的可访问资源【推荐】原理：使用扩展可以访问的资源，确定扩展是否安装或启用。存在问题：需要知道extension id以下 HTML 标签支持 onload :<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>加载图片资源【推荐】manifest.json{..."web_accessible_resources": ["img/logo.png"]}html调用function detectExtens...未完，继续阅读→
关键字：chrome插件检测

原生js封装ajax的函数（运用promise的回调函数）

发布时间：2021/3/23 11:08:47 阅读(3198)条评论(0)条

原生js封装ajax的函数（运用promise的回调函数）本篇文章实现了如何 优雅的在 ajax中使用promise。Promise 其实也是原生js新的特性，使用Promise可以很好的解决这些问题：处理错误，比如网络请求失败如果发生错误，可以传值也可以处理JavaScript的错误很好的解决比如回调也是一个异步操作的情况封装方法如下：/*利用promise封装的ajax函数*/function ajax(method,url, data){ /*兼容IE*/ var request=window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); return new Promise(function(resolve,reject){ request....未完，继续阅读→
关键字：es6promiseajax回调

微信小程序保存视频到本地（封装）

发布时间：2021/1/22 14:23:06 阅读(3503)条评论(0)条

微信小程序保存视频到本地（封装）function getVideoStting(url) { return new Promise((reslove, reject) => { if (url) { wx.showLoading({ title: '保存中', mask: true }) wx.getSetting({ success(res) { wx.downloadFile({ url: url, success: function (res) { console.log(res) var temp = res.tempFilePath wx.saveVideoToPhotosAlbum({ filePath: temp, success: function (res)...未完，继续阅读→
关键字：小程序视频封装Promise

如何绕开referrer防盗链

发布时间：2020/12/24 9:46:35 阅读(6291)条评论(0)条

如何绕开referrer防盗链开篇最近处理了一个与referer有关的需求，发现里面还是有一点门道的。因此在本篇文章整理了referer相关知识点，主要涉及图片防盗链与如何绕开防盗链限制。参考：Referer-MDNHTTP来源地址-维基百科使用refererReferer是HTTP请求头的一个字段，包含了当前请求页面的来源页面的地址，通过该字段，我们可以检测访客是从哪里来的。那么，referer到底有啥作用呢？交互优化在某些web应用的交互中，右上角会提供一个返回按钮，方便用户返回上一页  其实现一般也比较简单<a href="javascript: history.back();">&...未完，继续阅读→
关键字：前端referrer防盗链

JS实现返回上一页并刷新页面的方法

发布时间：2020/5/15 15:44:52 阅读(4141)条评论(0)条

JS实现返回上一页并刷新页面的方法移动端的开发的时候经常修改了内容，返回的时候值还没变化。所以，返回时返回的页面需要刷新。在这里分享给大家供大家参考，具体如下：正常情况下我们通过 history.back() 或者 history.go(-1) 返回上一级页面的时候，是不会刷新页面的。这种不刷新页面包含两种情况：在 android 或者 pc 浏览器中看到的页面有刷新的效果，其实不是这样的，这个时候的所有的资源都是从缓存中加载来的。我们通过浏览器调试工具可以看到 from disk cache 或者 from memory cache。在 ios 中甚至于返回到了上一页后...未完，继续阅读→
关键字：jshistoryios前端刷新

网页外链用了 target=_blank，要注意了

发布时间：2020/3/21 10:17:58 阅读(4119)条评论(0)条

网页外链用了 target=_blank，要注意了今天给大家分享一个 Web 知识点。如果你有过一段时间的 Web 开发经验，可能已经知道了。不过对于刚接触的新手来说，还是有必要了解一下的。我们知道，网页里的a标签默认在当前窗口跳转链接地址，如果需要在新窗口打开，需要给 a 标签添加一个target="_blank"属性。<a href="http://86y.org/" target="_blank">幸凡学习网</a>顺便提下一个有意思的现象，很早之前我就发现，国外网站倾向于在当前页跳转，而国内网站喜欢打开新窗口。不信你们可以去验证下。我不知道这是交互设计上...未完，继续阅读→
关键字：技巧外链安全

C#解析复杂的 Json 字符串

发布时间：2019/9/3 11:35:08 阅读(8693)条评论(0)条

C#解析复杂的 Json 字符串如今大量的 Web API 为我们编写复杂程序提供了极大的方便，例如百度地图 API、图灵机器人 API等等，利用这些 Web 应用程序我们可以充分发挥云服务的优势，开发出大量有趣的应用。Web API 通常返回 Json 或 XML 格式的检索数据，由于 Json 数据量更小，所以目前大多数情况下我们都选择返回 Json 格式的数据。如果返回的 Json 文档很大，而我们仅仅需要其中的一小部分数据。按照之前的方法，我们必须首先定义一个与 Json 对象对应的 .NET 对象，然后反序列化，最后才能从对象中取出我们需要的数据。而有了 Json.NET，这个任务就很容易实...未完，继续阅读→
关键字：jsonnet解析

关于微信小程序 wx.getBackgroundAudioManager 的错误提示

发布时间：2019/7/15 10:12:43 阅读(10025)条评论(0)条

关于微信小程序 wx.getBackgroundAudioManager 的错误提示最近鼓捣的小程序要用到背景音乐这个wx.getBackgroundAudioManager 背景音乐插件。在小程序管理后台的 【开发】有报一些关于wx.getBackgroundAudioManager的错误。所以也查了一些相关资料并没有找出原因，经过自己仔细检查代码发现了。原来是在没有开启背景音乐的情况下，进行了其它的相关操作导致。完整错误代码如下：setBackgroundAudioState:fail: jsapi has no permission, event=setBackgroundAudioState, runningState=background, permissionMsg=permission ok, detail=jsapi permission required playing audio but cu...未完，继续阅读→
关键字：小程序背景音乐

27个 底部 tab bar 动画设计灵感

发布时间：2019/6/27 16:18:05 阅读(12988)条评论(0)条

27个 底部 tab bar 动画设计灵感Colored Tab Bar Interactions by tubikTab Bar Animation nr.2 by Lukáš Straňák | codepen DEMO Google Bottom Bar Navigation Pattern by Aurélien Salomon | codepen DEMOTab bar interaction with animated icons by Ketan | GithubCreate New Document Tab Bar by Hoang Nguyen | 相似的例子codepenWeChat Tab Bar Redesign by Lukáš Straňák | codepenJack - Tab Bar Interaction b...未完，继续阅读→
关键字：tabbar设计动画

PhotoSwipe部分安卓手机长按图片不弹出菜单问题

发布时间：2019/1/2 17:15:45 阅读(6797)条评论(0)条

PhotoSwipe部分安卓手机长按图片不弹出菜单问题在使用PhotoSwipe时，在IOS设备上图片放大能够弹出微信的保存图片的菜单，而安卓上却没有微信的保存图片的菜单。PhotoSwipe部分安卓手机长按图片不弹出菜单问题 特此记录一下 在photoswipe.js里找到如下代码_onDragStart = function(e)然后定位到内部的if (_preventDefaultEventBehaviour(e, true))找到如上代码位置编辑成如下保存即可if (_preventDefaultEventBehaviour(e, true)) { var isAndroid = /android/gi.test(navigator.userAgent); isAndroid || e.preventDefault();}未完，继续阅读→
关键字：PhotoSwipe微信安卓

html页面内容的收缩和展开效果 px / rem 默认显示两行或更多

发布时间：2018/9/26 10:40:08 阅读(9374)条评论(0)条

html页面内容的收缩和展开效果 px / rem 默认显示两行或更多一、概述：html页面内容的收缩和展开效果, 默认显示两行内容，点击进看全文，显示全部。(效果如下图：)二、源代码如下：<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>px / rem 默认显示两行内容 点击进看全文 显示全部</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js">...未完，继续阅读→
关键字：jq技巧

程序员都在用的电脑小技巧,看看你会几个

发布时间：2018/8/14 11:38:03 阅读(5539)条评论(0)条

程序员都在用的电脑小技巧,看看你会几个现在加班已经是常态了，程序员加班更甚，但是对于其他行业来说，有些工作其实是可以通过一些小技巧来提高工作效率的，如果你经常因为电脑操作的问题耽误工作效率，这篇文章可以让让你少加班一小时。如果你每天按时准点的下班，那么这篇文章或许可以让你多刷一会抖音，多和旁边的美女同事说几句话。当然还有一个最重要的前提就是你用的电脑室windows的，如果是用苹果的，可以等明天一、文件误删如何恢复？经常遇到不小心误删的情况，而且还是彻底删除，咋办啊？不需要任何工具，简单三步走，你就能找回你删掉并清空回收站的东西。1、单击&l...未完，继续阅读→
关键字：电脑技巧

移动端自适配 力荐viewport缩放解决方案

发布时间：2018/7/6 9:39:54 阅读(9736)条评论(0)条

移动端自适配 力荐viewport缩放解决方案一、概述：做了几年的移动端一直用rem，感觉最烦琐的就是rem的计算。随便可以用cssrem自动计算，但是有时候感觉宽度跟高度的rem并不是完全准确。所以决定用viewport缩放来试试看效果，经果一些网友的帮忙测试，发现缩放viewport这种方法更简单、高效、准确。测试结果：（如果其它手机测试结果欢迎留言）测试地址：http://86y.org/demo/scale/360n6pro 正常oppo r7s 正常坚果Pro 正常iphone6 正常iphone8p 正常华为p9 正常二、思路：例如效果图是：750*1334(px)的源文件。1、根据750 PSD源图 宽度尺寸进行比例缩放，高度并没有限止，所以高度...未完，继续阅读→
关键字：移动端rem自适应viewport

解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG

发布时间：2018/7/5 11:53:20 阅读(9657)条评论(0)条

解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG一、概述：项目中有一个置底发布评论的效果,安卓没有发现问题，但是IOS出现了被输入法挡住的问题。搜索了下这个BUG，很多人都有在问这个问题。二、解决思路：有去尝试了一些测试，但有些是只能在弹出时滚动到底部，切换输入法还是有问题。所以我对此方法做了一个调整，IOS中需要点击才能获取焦点，接着我就对input点击事件着手。1、点击input时科开启定时器自动滚动到底部，防止切换输入法导致被挡住。2、input失去焦点时清除定时器。三、实例源代码：(测试地址：http://www.86y.org/demo/input%20fixed/)<div class="replay_com&qu...未完，继续阅读→
关键字：bugiosinput

js 只选择选择时分秒的jq插件

发布时间：2018/6/20 11:40:49 阅读(13644)条评论(0)条

js 只选择选择时分秒的jq插件一、概述：由于项目中需要使用到只选择时分秒的插件，而开始使用的laydate插件必须要带日期所以，还是自己写一个时分的插件吧。效果如图下：二、实例代码：（点击进入预览效果）<!doctype html><html><head><meta charset="utf-8"><title>js 只选择选择时分秒的jq插件-幸凡学习网</title><style>/* CSS Document */html, body, div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td,figure{margin:0;pa...未完，继续阅读→
关键字：插件时间

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈

发布时间：2018/6/8 14:25:30 阅读(12181)条评论(0)条

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈一、概述：看了很多小程序的canvas，很多人在骂街，跟浏览器的操作实在相差太多，API极少。所以有些功能基本上没办法实现。但是基本的还是可以的。比如我要实现 生成商品图片（包含产品的：标题，价格，图片，小程序商品详情的二维码等）点击生成后的canvas保存到手机。虽然效果实现了，但是走了不少弯路。所以有必要在此纪念一下。需要用到的生成二维码组件（可自行下载添加到小程序根目录utils里）：https://github.com/demi520/wxapp-qrcode/blob/master/utils/qrcode.js以上二维码组件默认是有空白边的的，如果不需要空白区域，也可以修改...未完，继续阅读→
关键字：小程序canvas

ES6 Promise 用法讲解 链式操作

发布时间：2018/4/26 10:29:50 阅读(7977)条评论(0)条

ES6 Promise 用法讲解 链式操作Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log("执行完成"); resolve("随便什么数据"); }, 2000);});Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“...未完，继续阅读→
关键字：es6proisejs
当前第  1  页 / 共  28  页  总共559条记录
  123 
Created By Charry-May 3,2010
粤ICP备10093478号-1
顶部