经验首页
HTML5轻松实现H5页面下拉刷新：滑动触发、高度提示与数据刷新全攻略
前段时间在做小程序到H5的迁移，其中小程序中下拉刷新的功能引起了产品的注意。他说到，哎，我们迁移后的H5页面怎么没有下拉刷新，于是乎，我就急忙将这部分的内容给填上。 本来是计划使用成熟的组件库来实现，尝试之后发现这些组件和我们H5页面的其他逻辑有冲突（H5还有吸顶、锚点、滑动高亮、横向滚动），...[2024/6/17]
可视化学习：实现Canvas图片局部放大镜
前言 最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果，在这节课程的结尾留了一道局部放大镜的题目，提示我们用像素处理的方式去实现这个效果，最终实现随着鼠标移动将图片局部放大，本着把学到的内容落地实践的想法，我就去思考了一番，但很不幸，我思考了好几天也没思考出结果，因为刚开...[2024/3/29]
前端优化 之 preload
为了优化我们公司网站的性能，我最近引入了浏览器预加载技术（Preload）。 这项技术可以显著减少级联情况，提高资源加载的并行度，从而加速网站的加载速度。 Preload的原理 Preload的原理是在浏览器解析HTML文档时，提前加载页面所需的关键资源，如样式表、脚本文件和字体等。 通过...[2024/3/22]
canvas实现动态替换人物的背景颜色
起因 今天遇见一个特别有意思的小功能。 就是更换人物图像的背景颜色。 大致操作步骤就是:点击人物-实现背景颜色发生变化 将图片绘画到canvas画布上 我们需要将图片绘制到canvas画布上。 这样做的目的是为了方便我们去操作像素点来更改颜色。 首先创建 Image 的实例。将图片的地址赋值...[2023/11/17]
form 表单恢复初始数据
1 表单数据的保存和恢复方法 1.1 前端数据保存方法 在前端，我们可以使用两种方法来保存表单数据：LocalStorage 和 Cookie。 使用 LocalStorage 保存数据：LocalStorage 是浏览器提供的一种本地存储机制，它允许将数据以键值对的形式存储在用户的浏览器中。...[2023/8/14]
Canvas好难，如何让研发低成本实现Web端流程图设计功能
摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 前言 相信大家在职场中经常会用到流程图，在互联网行业，绘制流程图不论在产品的设计阶段，还是后期优化业务流程的阶段，都有着巨大的价值。事实上，不仅是互联网行业...[2023/8/4]
你不知道的 HTTP Referer
前言 上周突然发现自己的自己站点的图片全都403了，之前还是好好的，图片咋就全都访问不了呢？由于我每次发文章都是先发了掘金，然后再从掘金拷贝到我自己的站点，这样我就不用在自己的站点去上传图片了，非常方便。 啥也没干，图片咋就403了呢？估计又是整了什么开源节流，降本增效吧，说白了就是大家都...[2023/7/28]
canvas?中如何实现物体的框选
目录前言框选的实现Group 类的实现小结 前言 虽然这两个月基金涨的还行，但是离回本还有一大大大段距离??。 今天呢，我们要实现的是 canvas 中物体的框选功能，大概就像下面这个样子： 然后话不多说，直接开撸 ??? 框选的实现 先来说下拖蓝选区（鼠标拖拽区域）的实现...[2022/8/3]
前端canvas中物体边框和控制点的实现示例
目录前言关于边框关于控制点本章小结 前言 在上一章中我们已经搞定了下层画布，也就是能够对物体进行绘制了，现在就可以开始搞搞上层交互了。 不过在和画布产生交互之前，我们还要做一件事情，就是让物体支持边框和控制点的绘制，亦即物体被选中时的状态，就像下面这样： 这样一来如果要对物体...[2022/8/2]
HTML基本标签使用
标签使用 标题标签 为了使网页更具有语义化，我们经常会在页面中使用到标题标签HTML共提供了6个等级的网页标题，即-为1到6级标题 标题的重要性为一级标题最重要，依次递减。单词head的缩写，意为头部，标题。 特点是：加了标题的文字会变得加粗，字母的字号也会依次变大，且一个标题独占一行。 ...[2022/1/17]
HTML表格标签
html表格标签 表格标签 主要作用：表格主要用于显示、展示教程，因为他可以让数据显示的非常完整，可读性非常好、特别是后台展示数据的时候，能够熟练的运用表格就显得非常重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。 所以表格不是用来布局的，是用来展示数据的。 基本语法 <ta...[2022/1/17]
HTML表单标签
列表标签 表格是用来显示数据的，那么列表就是用来布局的 列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由和方便。 列表可以分为无序列表，有序列表，自定义列表。 无序列表 ul标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用li标签定义。 基本语法 ...[2022/1/17]
H5应用转换快应用
1. H5应用及快应用介绍 H5应用 第五代 Html 标准开发的 web 应用，浏览器通过解析 HTML，就可以把网页内容显示出来； 跨平台性； 浏览器上运行。 快应用 提供原生体验的免安装应用； 行业标准，现在有超过12家智能手机厂商支持； 需要在快应用...[2022/1/17]
FileReader()读取文件、图片上传预览
前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 其中File对象可以是来自用户在一个<input>元素上选择文...[2022/1/17]
html5调用摄像头截图
关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧，首先图像识别是其中最热门的应用场景，首先实现调用摄像头以及截图。 demo的效果...[2021/12/31]
成理21点开发笔记Day2:开始程序实现
D2：开始程序实现 程序结构分类 C：client-单机（几乎不和网络关联 S：server-服务器应用（兼容性好，跨平台 C/S：ClientServe-客户端与服务器应用-端应用（功能强，稳定性好，用户体验良好/更新维护成本高，比如双十一，及时性不太好，需要update B/S：Br...[2021/12/17]
Html5同时支持多端sdk的小技巧_html5
需求 在实际项目中，我们通常会需要做一些跨多平台的页面。比如说一个活动页面，需要在微信小程序里展示，也需要在自家公司的app里面展示，还需要在支付宝等平台里面展示。这时候一个h5就是很符合你的需要了。如果这个时候需求再复杂一些，比如说在这个活动页面需要调些扫码功能，或者需要调起支付功能，等原生方...[2021/11/15]
基于HTML十秒做出淘宝页面_html5
十秒钟做出一个网页，可能大家看完会觉得有点标题党，其实不然，把别人的抠过来还是可以的 比如我这次先把淘宝的网页扣过来为例 第一步：先创建一个heml项目，然后加一个iframe标签，把淘宝的网站链接过来 <body> <iframe src=&quo...[2021/10/19]
Canvas绘制像素风图片的示例代码_html5
前言 童年玩红白机。尤其国内的小霸王那段时光还记得么。 那个马里奥大叔还记得么。 因为特别喜欢像素风的游戏从小到大一直都是，像素风本身就是由极度简单的元素构成极度复杂的画面，因此它可以具备无限的创作空间，形成令人过目不忘的独特画风。所以我想借用一张清晰的图片生成出具有像素点阵的图片来...[2021/9/27]
使用canvas对video视频某一刻截图功能_html5
前言 本次使用的是canvas.drawImage()实现截图功能, 关于api支持的dom元素、基本参数，可点击查询下面连接 CanvasRenderingContext2D.drawImage() 处理过程 我本次的需求是多人视频中对某一视频某一刻的截图，展示视频直接用的原生video...[2021/9/22]
Canvas如何做个雪花屏版404的实现_html5
介绍 过往，电视用天线接收信号，没信号出雪花屏，刺啦刺啦作响，然后赶紧扶正想办法让他找到信号。当时电脑还经常连上小霸王打游戏，魂斗罗，超级玛丽，坦克大战。。。时间如白驹过隙，科技进步的飞快，现在都用网络电视了再也不会出现那种情况了，但那真是段令人怀念的时光。 我们今天的主题就是做一个雪花屏版...[2021/9/22]
html5笛卡尔心形曲线的实现_html5
1650年，斯德哥尔摩的街头，52岁的笛卡尔邂逅了18岁的瑞典公主克里斯汀。 那时，落魄、一文不名的笛卡尔过着乞讨的生活，全部的财产只有身上穿的破破烂烂的衣服和随身所带的几本数学书籍。生性清高的笛卡尔从来不开口请求路人施舍，他只是默默地低头在纸上写写画画，潜心于他的数学世界。 一个宁静的午...[2021/9/14]
HTML5 语义化标签(移动端必备)_html5
距HTML5标准规范制定完成并公开发布已经有好些年了，面试时也少不了要问对HTML5语义化得理解。但是在实际运用时，真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司网站推论），可能一部分原因是仍有部分用户使用在使用低版本浏览器。 但是就我个人而言，因选取一些标签时会比较纠结...[2021/8/26]
html5 录制mp3音频支持采样率和比特率设置
13年的时候做过html5录音，一个问题是保存的wav格式文件很大，当初用了一个迂回的方式，上传到服务器后调用 lame 编码器转换，但由于文件大，上传较慢。不得不说，前端技术发展真是日新月异，有人实现了js版本的lame编码器，可以直接在浏览器端录制MP3音频。 lamejs介绍 最初有个...[2021/7/19]
html5实现点击弹出图片功能
下面给大家分享html5点击弹出图片，分为前台代码和js代码，具体内容如下所示： 前台代码： <a href="javascript:;" onclick="repeat()"> <div id="moda...[2021/7/19]
html5表单的required属性使用
描述 今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性 定义和用法 required 属性是一个布尔属性 required 属性规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 注释：require...[2021/7/12]
html5调用摄像头实例代码
最近在学习在做HTML5的项目，看了博客上html5调用摄像头拍照的文章，但各有瑕疵。于是自己查阅书籍写了一个demo，主要分三步，废话不多说上代码。 HTML代码部分： <!--video用于显示媒体设备的视频流，自动播放--> <video id=&...[2021/6/28]
前端之设计稿二三事
导语: 前端作为web项目开发流程中的一个环节，在实际开发过程中，必定要和ui/交互设计师进行沟通协调，以便保证设计稿能够完全代码化，并且是设计师希望的效果。所以，在这里我总结了一些前端开发需要注意的设计稿的一些东西。 目录 设计稿为750px的原理 常用中文字体英文名称 设计稿和代码...[2021/6/28]
跨域访问方法介绍(5)--使用 window.postMessage 传递数据
postMe age 是 HTML5 XMLHttpRequest Level 2 中的 API，可以用于窗口间消息的传递：页面和其打开的新窗口的数据传递、页面与嵌套的frame消息传递、页面与嵌套的iframe消息传递。本文主要介绍通过使用 postMe age 方法来实现不同域下页...[2021/6/28]
HTML5页面音频自动播放的实现方式
最近有这么一个需求，需要在手机加载一个页面的时候，自动播放音乐资源。一般情况下，这个问题也就解决了，但是要保证各种手机上表现一致，那就相当困难了，至少要费点儿周折。 下面有三种常规的方式，可以创建自动播放的audio对象： 第一种：页面上创建一个audio标签，写好相关的属性，如：autopl...[2021/6/28]
跨域访问方法介绍(3)--使用片段识别符传值
片段标识符（fragment identifier）指的是，URL 中 # 号后面的部分，比如 http: example.com/x.html#fragment 的 #fragment。如果只是改变片段标识符，页面不会重新刷新。父窗口可以把信息，写入子窗口的片段标识符。子窗口通过监听 ...[2021/6/21]
跨域访问方法介绍(4)--使用 window.name 传值
浏览器窗口有 window.name 属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。这种方法的优点是，window.name 容量很大，可以放置非常长的字符串；缺点是必须监听子窗口 window.name 属性的变化，影响网页性能。...[2021/6/21]
Html5大屏数据可视化开发的实现
项目中需要做一个数据展示用的看板，初接到任务觉得这个没有什么难度，做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。 第一：浏览器不能有横向和纵向的滚动条，没有鼠标的滚动操作过程。 第二：有各类尺寸的屏，除了在九宫格拼接屏上完美显示，还要同时满足普通用户的电脑端显示。电脑的客...[2021/6/15]
HTML
参考学习视频 https: www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44 W3C 1994年 伯纳斯李创建了w3c w3c为了制定网页开发的标准。使用同一个网页在不同的浏览器中有相同的效果 结构、表现、行为三个部分构成一个网页 网页的...[2021/6/15]
跨域访问方法介绍(1)--同源策略
1、同源定义 如果两个 URL 的 protocol(协议)、host(主机)和 port(端口)都相同的话，则这两个 URL 是同源；否则为不同源。 当前页面url 被请求页面url 是否同源 原因 http: www.test.com/ http: www.te...[2021/6/15]
HTML5来实现本地文件读取和写入的实现方法
最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。 说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。 这件事情在html5以前是一件非常恐怖的，因为浏览器对本...[2021/5/31]
前端常用模板引擎- artTemplate
我们在用H5+C 3布局页面的时候，通过接口展示数据到页面的时候，如果数据少还好，有时候ul -> li有多个的时候 只能循环接口返回的数据然后一个一个去展示。 前段时间在无意中学习到一个新东西 art-template 前端模板引擎 这个东西可以像vue展示数据一样...[2021/5/24]
canvas绘制折线路径动画实现
最近有读者加我微信咨询这个问题： 其中的效果是一个折线路径动画效果，如下图所示： 要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。 如果用canvas来绘制，其中的难点在于： 需要计算子路径，这块计算比较复杂。...[2021/5/17]
HTML5简单实现添加背景音乐的几种方法
这里推荐两种方法，就是两个标签 <embed> 或者<audio > 常用 <audio > +c 布局 隐藏播放器 做网站比较实用！ <!DOCTYPE html> <html> <head> ...[2021/5/17]
Html5生成验证码的示例代码
利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码，背景为随机生成的颜色和杂乱的直线与点点。 进阶：利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。 代码块 <!DOCTYPE html> &...[2021/5/10]
WEB前端第六十九课——viewport、rem单位
1.viewport视口 视口（viewport），是视图窗口的简称。 视口的大小就是HTML元素的实际大小。 但是，在移动端要想展示实际页面大小则必须进行视口的适配设置， 否则，移动端加载页面时，默认视口宽度980px或某个值（布局视口宽度），无法呈现实际大小。 ...[2021/5/10]
简易流程图设计器Vue3
流程设计器主要完成流程定义，为工作流引擎收集元数据，主要包括：流程触发、路径判断、完成条件、用户分配等，配合工作流引擎完成低代码的构建。一个灵活的工作流引擎是离不开写代码的，我们要做的就是尽量封装复杂性，做到定义时直观，能快速完成工作流的定义。前端主要完成以下功能： 快速拖拽节点和路径完成流程...[2021/5/10]
浅谈src与href的区别
src 和 href 都是用来引入外部资源的属性，例如：图片、视频、CSS 文件、JavaScript 文件等。 那么它们两者之间究竟有什么样的区别呢？ <link href="style.c " rel="stylesheet" /> <img src="pic.png"...[2021/5/10]
html5中sharedWorker实现多页面通信的示例代码
是这样的，今天玩github，先是在没有登录浏览了一些页面，然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示： 那么这是怎么做到的呢？我们可以想到，一种办法是 localStorage，在某一个页面登录时，修改localStorage 状态，其他页面在显示的时候，读取最...[2021/5/10]
HTML5中 rem适配方案与 viewport 适配问题详解
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位（root em，根 em） 只根据当前页面 HTML 页面的 font-size 设置，如果根目录的 font-size 为 18px，则 1rem=18px 媒体查询设置 ...[2021/5/6]
Html5通过数据流方式播放视频的实现
本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件，可以兼容PC、Android和IOS环境。 H5页面可以通过<video> 标签来播放视频。一般的方式如下： <!DOCTYPE HTML> <html> <body>...[2021/5/6]
<button>与<input type =“ button” />。使用哪个？
查看大多数站点（包括SO）时，大多数使用： <input type="button" /> 代替： <button></button> 两者之间的主要区别是什么？ 是否有正当理由使用一个而不是另一个？ 是否有使用它们的有效理由？ <butto...[2021/5/6]
关于ios配置微信config出现验签失败的问题解决
在开发中，出现了一个关于微信配置的问题。 使用的开发工具以及开发框架为 uniapp ， JSSDK为 jweixin 使用uniapp进行公众号开发，需要在进入某个页面时候进行微信配置来达到更改分享信息的效果。 问题描述： 请求后台获取了微信配置参数并配...[2021/5/6]
HTML编码规范
---------------------- 加微信和老王聊技术、聊产品、 聊运营。 定期组织主题性远程语音讨论。 进群加微信 技术微信群： 加微信：wonter 发送：技术Q 医疗微信群： 加微信：wonter 发送：医疗Q ---------------------- 推荐阅读： CSS编...[2021/5/6]
WebGL之绘制三维地球
通过Three.js也许可以很方便的展示出3D模型，但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗？现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。 本节实现的效果: WebGL三维地球 内容大纲 构建网格 编写着色器 实现3D地...[2021/5/6]