web前端
关注
分享
扫一扫
文章平均质量分 68
liu__software
这个作者很懒，什么都没留下…
展开
-
禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动new
。原创 2025-03-12 15:25:50 · 412 阅读 · 0 评论 -
移动端布局方案 postcss-pxtorem-postcss-preset-env
通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作而不需要再手动计算。转载 2023-09-10 18:21:45 · 346 阅读 · 0 评论 -
如何判断用户是否访问过某个网址
2013-08-11文章目录我们经常有这样的需求：想知道用户之前有没有访问过某个网址。有没有什么方法或技术能实现这一点呢？转载 2023-09-07 10:43:27 · 360 阅读 · 0 评论 -
网页适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。以上几种方案仅供参考，笔者认为，现阶段适配处理起来是有点折腾，但是至少能解决，具体需要根据页面实际场景，在不影响用户体验与操作的大前提下不断尝试与探索，才能更完美的适配。凹凸实验室版权所有。转载：凹凸实验室（转载 2023-03-03 15:52:57 · 734 阅读 · 0 评论 -
type=number和type=tel的区别
type=number和type=tel的区别转载 2023-03-03 14:43:07 · 953 阅读 · 0 评论 -
阿里 前端 规范_阿里前端开发规范
页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件。转载 2023-03-01 11:57:32 · 3181 阅读 · 0 评论 -
video视频重新开始播放currentTime
在 react 中可以使用 document.getElementById('video') 获取元素。video.currentTime = 0 把播放时间设置为从零开始。vue项目中 需要每次点击出视频的时候重头开始播放。在vue 项目中用的 ref 获取的元素。video.pause() 暂停视频。video.play() 播放视频。autoplay 自动播放。control 有控制条。转载 2023-02-28 10:15:18 · 1167 阅读 · 0 评论 -
table同时实现跨行跨列
希望对于要实现这种效果的老铁有帮助。转载 2022-11-05 22:16:00 · 1162 阅读 · 0 评论 -
Navigator.sendBeacon 无阻塞发送统计数据防ajax请求失败
sendBeacon发出的是异步请求，并且是POST请求，后端解析参数时，需要注意处理方式；发出的请求，是放到的浏览器任务队列执行的，脱离了当前页面，所以不会阻塞当前页面的卸载和后面页面的加载过程，用户体验较好；只能判断出是否放入浏览器任务队列，不能判断是否发送成功；Beacon API不提供相应的回调，因此后端返回最好省略。转载 2022-11-05 21:53:48 · 1880 阅读 · 0 评论 -
var 变量在node跟浏览器环境的的声明
说明，在terminal输入代码跟文件里写代码用node执行文件，是不同的，在文件里写的代码被函数包裹着，所以不会挂到全局global对象，这个包裹着的函数是用作模块化的。这点在浏览器环境 node环境 得到的结果都是一样的，都会挂到全局对象（window或者global对象）商业转载请联系作者获得授权，非商业转载请注明出处。输出的居然是undefined，简直了，搜索下，关于node模块化，在阮一峰。1. 用var关键字声明。2. 不用关键字声明变量。转载 2022-11-04 11:46:52 · 430 阅读 · 0 评论 -
icon图标-Svg格式的icon颜色值修改及去掉hover时自带的提示 title
部分文件（例如delete-grey）: 把filter="url(#filter-1)"等删掉，（总之可以参考着export.svg修改）进入图标的svg文件：把fill=“#000”改成：fill=”currentColor”1. 去svg文件注释掉title。转载 2022-11-04 11:31:02 · 1638 阅读 · 0 评论 -
Javascrit中使用MediaSource播放加密视频
Javascrit中使用MediaSource播放加密视频转载 2022-11-04 10:51:56 · 3533 阅读 · 0 评论 -
如何在vue中使用video.js播放m3u8格式的视频
这篇文章主要介绍了如何在vue中使用video.js 播放m3u8格式的视频，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下。转载 2022-09-08 11:48:28 · 12029 阅读 · 7 评论 -
Web端直接播放 .ts 视频及mux.js播放ts视频没有声音
最近项目中需要前端播放 .ts 格式视频，捣鼓了几天学习到很多知识，也发掘了一种优秀的解决方案，分享给有同样需求的同学。转载 2022-09-08 11:19:23 · 5037 阅读 · 2 评论 -
Html5视频video标签中使用blob实现视频播放加密
【代码】Html5视频video标签中使用blob实现视频播放加密。转载 2022-09-08 11:08:14 · 4138 阅读 · 0 评论 -
PHP+HTML 实现blob链接视频播放
参照：视频video使用blob播放。转载 2022-09-08 11:02:29 · 1949 阅读 · 0 评论 -
前端实现文件上传的断点续传
还是先以图片为例，看看最后的样子断点续传，既然有断，那就应该有文件分割的过程，一段一段的传。以前文件无法分割，但随着HTML5新特性的引入，类似普通字符串、数组的分割，我们可以可以使用slice方法来分割文件。所以断点续传的最基本实现也就是：前端通过FileList对象获取到相应的文件，按照指定的分割方式将大文件分段，然后一段一段地传给后端，后端再按顺序一段段将文件进行拼接。而我们需要对FileList对象进行修改再提交，在之前的文章中知晓了这种提交的一些注意点，因为FileList对象不能直接更改，所以不转载 2022-06-01 15:26:00 · 3937 阅读 · 3 评论 -
微信公众号之测试号管理
需要访问的地址http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index主要的配置 (域名可以为局域网ip需加上端口，如172.17.55.173:8081，www.baidu.com:8081)1、要配置JS接口安全域名2、配置 网页账号之网页授权的域名作者：八妹sss链接：https://www.jianshu.com/p/c795316574f8来源：简..转载 2022-05-19 10:48:12 · 1046 阅读 · 0 评论 -
html标签数学标记语言MathML简介、工具及兼容
//zxx: 本文在Firefox或者Safari浏览器下浏览会有更好的体验。一、MathML简介MathML指“数学标记语言”，是XML语言的一个子集，用来在web网页，甚至部分软件中显示数学公式。简言之，就是使用特殊的类似HTML的标记在网页中显示数学公式。因为有些数学公式很复杂，普通HTML根本没法驾驭，例如下面这个公式：都有哪些MathML标记呢？可以看下面的定义列表说明（非原文访问会数学公式排版异常）：1. 按类别分类的MathML表现元素顶级元素<mat转载 2022-05-19 10:38:42 · 2997 阅读 · 0 评论 -
JS实现宫格拖动动画效果-列表拖拽动画
效果图如下：html布局：<!DOCTYPE html><html><head> <title>dragLabel</title> <meta charset="utf-8"></head><body> <div class="container"> <div class="item" draggable="true"><span>1</s转载 2022-05-19 10:27:18 · 881 阅读 · 0 评论 -
微信H5页面判断用户是否已关注公众号，以及唤起关注公众号页面
原文链接【https://blog.youkuaiyun.com/Lululu77/article/details/102668978?utm_medium=distribute.pc_relevant_right.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromMachineLearnPa转载 2022-05-19 09:51:21 · 5850 阅读 · 3 评论 -
如何将 Canvas 绘制过程转为视频-canvas转video视频播放
搜索示例：canvas转video视频播放 (网易云音乐的画中画歌词实现原理应该就是这样)如果我们用 Canvas 实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas 可以直接通过现代浏览器支持的 Media Streams API 来转成视频。Canvas 对象支持 captureStream 方法，这个方法会返回一个 MediaStream 对象。然后，我们可以通过这个对象创建一个 MediaRecorder 来录屏。我们看一.转载 2022-02-23 15:28:38 · 2716 阅读 · 2 评论 -
从微信H5点击保存图片说起-微信图片下载
微信H5里保存图片，大都是通过长按操作，弹起actionsheet保存照片。但我们的部分用户是老年群体，不知道怎么进行“长按”操作。考虑到这个因素，产品要求实现点击保存按钮来保存图片。不难想，你会立马蹦出这几个方案：方案一 使用HTML5的download属性浏览器里，如果有点击下载图片的需求，可以使用download属性，如：<a href="me.png" download="me"></a>但在使用前，需要考虑下两个问题：跨域问题和兼容问题。1.跨域问转载 2022-02-23 14:49:32 · 9003 阅读 · 2 评论 -
http网页是否能引用https资源/调用https接口？https网页是否能引用http资源/调用http接口？
总结：http可以调用https , https不能调用http (浏览器认为不安全)http网页引用https资源 -> 可以http网页调用https接口 -> 可以https网页引用http资源 -> 不行（浏览器认为不安全）推荐解决方法，不指定具体协议，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。具体方法超简单：<script src='//www.aa...转载 2021-12-23 16:32:34 · 7587 阅读 · 0 评论 -
wx-open-launch-weapp 按钮显示不出来，怎么回事
<wx-open-launch-weapp id="launch-btn" username="gh_1ac06b5a8f4e" path="/pages/index/index?cityCode=4401&ysschannel=2019DSGZHCDL_61034_gz"> <template> <style>.转载 2021-12-22 10:34:50 · 4291 阅读 · 0 评论 -
使用input 的accept 在手机端提示：无法打开文件选择器
在做一个论坛的h5页面，有发布图片的功能。使用input 的accept属性时，在手机端测试会提示：“无法打开文件选择器”，在PC上测试就没事。不加accept也没事，但是需要筛选文件类型的。求大神解答，谢谢了。解决办法：好吧，是我写的accept格式有问题，用.jpg,.jpeg..这样写在PC端可以识别，但是在手机端需要添加images/...这样才可以，应该是读取文件类型的脚本不同导致的。测试通过。在网上找了好久都没类似的问题，希望给同样问题的小伙伴有些帮助。发现这个问题是看到了.转载 2021-12-22 10:29:11 · 3260 阅读 · 0 评论 -
echarts 图表无数据为空时显示“暂无数据”
如标题所述，我们希望 echarts 图表在没有数据时显示 “-暂无相关数据-” 字样。操作：需要对返回的数据做判断，如果有数据则正常显示图表，如果没有数据，我们将此 div 的内容改为文本 “-暂无相关数据-”，并设置样式即可。HTML：<div id="chart"></div>JS（Vue）：方法（一）：// 无数据时：展示暂无数据const dom = document.getElementById('chart');dom.innerHT转载 2021-12-22 09:59:20 · 11991 阅读 · 0 评论 -
CSS基础之如何前端布局方式有哪些
我们知道html定义了前端页面的结构，css定义了页面的样子，JavaScript定义了用于的行为。页面的结构和样式，又可以简单的成为是布局，我们就来讲讲前端页面的布局有哪些？1、流体布局流体布局其实我们正常的布局，他其实就是一个盒子模型。在这种布局下我们其实能操作的布局样式很少，我这里主要提一下margin属性，我们可以通过 margin: auto；对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理：auto会让盒子模型填充父元素剩下的宽度。 也可实现盒.转载 2021-12-22 09:37:08 · 309 阅读 · 0 评论 -
微信公众账号查看历史消息
我们在关注微信公众号的时候会看到该公众号相关信息：微信公众号的logo、名称、微信号、功能介绍、微信认证情况、认证详情，通过这些信息我们可以大概了解这个公众号的运营主题内容，如果还想了解更多可以点击“查看历史消息”查看最近的群发消息。 还没关注公众号前可以快速查看历史消息，关注完以后我们可不可以设置一个微信自定义菜单来显示这些历史消息呢？更直白的说是查看历史消息这个页面的URL。 点击“查看历史消息”页面右上角的“┇”即上图中的1标示，在弹出的下来菜单中选“复制链接”，即图中2标示，转载 2021-04-21 14:22:18 · 1825 阅读 · 0 评论 -
移动Web开发字体格式选择（附.woff\.woff2 兼容性）
在做移动开发的时候，UI设计师会提供一些定制字体，来提高产品的视觉效果。对于前端开发来说，就需要考虑字体文件的兼容性和文件的大小，在尽量保证UI效果的情况下，兼容更多的浏览器，减少资源体积，使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制，最终字体包文件都会很大，这里不做讨论。下面主要介绍英文、数字符号场景下几种常见的字体格式。.ttfTrueType，是Type 1(Adobe公司开发)的竞品，由苹果公司和微软一起开发，是mac系统和window系统用的最广泛的字体，一般从网上下载的字转载 2021-04-19 09:46:57 · 2099 阅读 · 0 评论 -
网页资源的预加载preloadjs
PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源例如：图片 文件 音频 数据 等等首先需要引入preloadjs文件分享一个在线引用的网站:https://www.bootcdn.cn/preloadjs在线引用地址:<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.js"></script>下面说说具体的用法(基础):首先我们需要创建一个实例对象转载 2021-04-19 09:43:34 · 925 阅读 · 0 评论 -
浅谈http中的Cache-Control
前言我们用http访问时，会先发送一个请求，之后服务器返回一个应答，在Chrome的开发者工具(按F12或右击选择检查)中展现了整个过程：第一部分General是概要，包含请求地址，请求方式，状态码，服务器地址以及Referrer 策略。第二部分是应答头部，是服务器返回的。第三部分是请求头部，是客户端发送的。这次我们从两个角度来看看http的缓存：缓存控制和缓存校验。缓存控制：控制缓存的开关，用于标识请求或访问中是否开启了缓存，使用了哪种缓存方式。缓存校验：如何校验缓存，比如怎么定义缓转载 2021-04-19 09:32:14 · 3100 阅读 · 0 评论 -
前端使用html5、ffmpeg实现录屏摄像等功能
前段时间做一个windows的桌面应用，vue + electron，涉及到录屏和摄像功能，网上相关的文档蛮少的给需要的人一些参考如果文章描写有误或者还有更好的方法，请留言告诉我，笔芯 (´▽`ʃ♡ƪ)背景介绍** 涉及技术：vue、electron、ffmpeg、node **关于录屏和摄像对比了两种方法 使用HTML5的api实现 摄像：mediaDevices（获取设备）+ getUserMedia（获取流） + MediaRecorder（存储） 录屏：getDispl转载 2020-12-23 16:40:23 · 1042 阅读 · 1 评论 -
XMLHttpRequest上传文件实现进度条(-onprogress- )
话不多说，直接上代码：<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <script type="text/javascript"> var xhr; var ot;// var oloaded; //上转载 2020-12-22 11:30:22 · 1289 阅读 · 1 评论 -
微信公众平台获取网页授权(测试号)
在测试微信公众号的网页开发授权的时候,总是提示scope参数错误啥的,获取不到正确的授权.经多方排查,发现确实是按照官方文档的流程做的,但就是出不来.折腾了半天,在qq群里询问了一下有经验的开发者,这才算是解决了.具体步骤如下:1.登陆微信公众号后台,左下角找到2.进入之后,会看到测试号的一些基本信息,用你的微信号扫描二维码关注测试号3.向下拉,我们可以看到各种权限都可以使用.网页账号权限处,右侧点击修改,此处填入你的网页域名5.确认之后,后台配置就完成了,此时..转载 2020-12-22 11:27:00 · 995 阅读 · 0 评论 -
WebSocket之解析数据帧
知道了怎么握手只是让客户端和服务器建立连接而已，WebSocket真正麻烦的地方是在数据的传输上！为了环保，它使用了特定格式的数据帧，这个数据帧需要自己去解析（当然也有别人编写好的库可以用）。虽然官方文档描述的很详细，但是看起来还是蛋疼。 当客户端向服务器发送一个数据时服务器收到一个数据帧，比如下面的程序//客户端程序varws=newWebSocket("ws://127.0.0.1:8000");ws.onopen=function(e){ws.send("次碳酸钴"...转载 2020-08-07 16:48:03 · 1005 阅读 · 0 评论 -
video 播放 全屏 更多控件显示隐藏&自定义视频控件&Shadow DOM
影子DOM通过创建文档片段的形式高效地封装内容，影子DOM的内容是特殊的文档，会通过合并到主文档的方式来创建所有被渲染的内容。实际上一些浏览器已经通过影子DOM的方式来渲染浏览器的插件转载 2020-06-19 14:14:29 · 4714 阅读 · 0 评论 -
HTML5调用摄像头录制视频
HTML5调用摄像头录制视频不支持ie，ie下不支持webrtc，无法使用navigator.getUserMedia调用摄像头<!DOCTYPE html><html><head> <title>video recoder</title> <script src="fileSaver.js"></script> <meta http-equiv="Content-Type" co转载 2020-06-19 14:01:35 · 1712 阅读 · 1 评论 -
如何理解并应用贝塞尔曲线推导原理实际应用总结
制图工具http://cubic-bezier.com/ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)linear: cubic-bezier(0, 0, 1, 1)ease-in: cubic-bezier(0.42, 0, 1, 1)ease-out: cubic-bezier(0, 0, 0.58, 1)ease-in-out: cubic-bezier(0.42, 0, 0.58, 1)贝塞尔曲...转载 2020-06-19 11:54:36 · 948 阅读 · 0 评论 -
贝塞尔曲线算法之JS获取点
什么是贝塞尔曲线？贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。这个一阶贝塞尔曲线绘制过程，黑点按百分比t从P0->P1移动，看不出什么呢~ 那继续看后面的图这个是二阶贝塞尔曲线，从P0->P1有个小绿点按百分比t运动，从P1->P2也有个小绿点按百分比t运动，两个绿点之间也有个小黑点按百分比t运动，这个黑点产生的轨迹就是一个二阶贝塞尔曲线。这个是三阶贝塞尔曲线，同理，绿点有3个，点与点之间都是按百分比t运动，最转载 2020-06-19 10:28:06 · 2820 阅读 · 0 评论