该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里...

因为原型图跟插件ui有出入，所以自己写了一个方法。。 首先得有一个上传按钮。 input type=file id=fileys class=fileys @change=uploadFile($event) accept=image/*/!--uploadFile用change是因为。用户可能会重...

前言 最近在做项目的时候发现，在公司电脑上没问题，在自己电脑上确有问题。做的是canvas的项目，在自己电脑上运行的时候，发现，会出现点击选不中的问题还有，canvas刷新会有残影...

html5实现滑块功能之type=range属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。 2.感觉挺有意思,就做了一个关于滑块的动画的例子，可以通过开始和结束按钮...

实例 带有 placeholder 文本的搜索字段： form action=demo_form.asp method=get input type=search name=user_search placeholder=Search W3School / input type=submit //form 定义和用法 placeholder 属性提供可描述输入字段预...

最近学习了HTML，今天写个HTML代码雨，然后下面用HTML和js也写了一个，给自己留点笔记 先看看效果 1、绿色： 2、彩色： 3、背景色： 4、绿色逐渐变浅： 源代码： !DOCTYPE htmlhtml head met...

为了让IMG自适应大小，如下我做了一个横向自适应的示例： IMG样式（横向拉伸，纵向自动匹配大小） DIV样式（元素居中显示） IMG样式 （横向拉伸，纵向自动匹配大小） width:100%; heig...

随着 4G 的普遍以及 WiFi 的广泛使用，手机上的网速已经足够稳定和高速，以视频为主的 HTML5 也越来越普遍了，相比帧动画，视频的表现更加丰富，这里介绍一些实践经验。 video的属性...

问题描述 当我们使用easyui做后台管理系统的时候，会使用tree组件来实现树形菜单，而我们每点击一次相应菜单，会根据是否有url来判断是否是一级菜单，以及是否已经存在 //根据该节...

使用input + datalist 实现自动补全功能，其中datalist中的内容是根据input输入的内容动态变换的，代码如下 !DOCTYPE HTMLhtmlbodyscript src=./jquery-1.7.2.min.js type=text/javascript charset=utf-8/scriptscriptfun...

前台提交信息到后台一般两种常见提交方式： Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持，比如input date就不支持 解决方案： 可以在date上面覆盖一个div，填写...

前言 图片编辑器虽然是图片涂鸦工具，但是在当前疫情的大背景下，该工具还可以成为老师在线修改学生提交的家庭作业的工具使用的，它可以极大地减轻了老师的批改作业的工作负担...

html5默认气泡修改 默认的浏览器气泡样式： 谷歌浏览器 火狐浏览器 IE浏览器 在谷歌29版本之前可以使用伪元素进行修改： ::-webkit-validation-bubble 不过已被废弃！！！ 新的解决方案： 效...

前言 说到九宫格是不是想到了九宫格火锅那（O(_)O哈哈~）。其实九宫格布局在各大网站基本都有应用，当然这里的九宫格是泛指（O(_)O哈哈）。比如小米商城局部布局如下： 不难发现，...

本文介绍了canvas手机的手势解锁，分享给大家，顺便给自己留个笔记，废话不多说，具体如下： 按照国际惯例，先放效果图 1、js动态初始化Dom结构 首先在index.html中添加基本样式 body...

哈哈哈俺又来啦，这次带来的是canvas实现一些画布功能的文章，希望大家喜欢！ 前言 因为也是大三了，最近俺也在找实习，之前有一个自己的小项目: https://github.com/zhcxk1998/School-Partn...

工作中遇到如下需求，点击输入框弹出自定义弹窗，输入框是input标签： 但是在移动端，input会默认触发手机的虚拟键盘，如何阻止手机虚拟键盘弹起呢？目前我试过有两个方案，一个...

一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=属性值）格式，避免出现错误 （下面加粗的属性为常用属性） 属性 值 功能描述 controls controls 是否显示播放控件 au...

最近在项目中遇到一个需求，需要提供网页截图的功能。百度下发现html2canvas很好用。那就试试吧。 资源下载地址 插件下载地址：html2canvas下载地址 使用方式 项目使用的react组件开发方...

在HTML5中，我们可以使用drawImage方法在canvas上进行画图操作，其基本代码如下： var canvas = document.getElementById(canvas);var context = canvas.getContext(2d);var image = new Image();image.src = images/01.jpg;cont...

图片放大镜效果 在线源码预览 源码 原理 首先选择图片的一块区域，然后将这块区域放大，然后再绘制到原先的图片上，保证两块区域的中心点一致, 如下图所示: 初始化 canvas id=canva...

android下html5的视频播放一直是前端兼容的重灾区，各种体验差，被诟病已久。但之前的故宫穿越H5，和吴亦凡入伍H5，利用的视频技术，貌似又给人一种新面貌。 前段时间做某项目，恰...

快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等 nav ul lia href=#Home/a/li lia hre...

1. 需求 前段时间开发项目，遇到了一个需求，简单来说，就是我们H5的页面有一个在App中打开的按钮，用户点击后，如果用户已经安装app，则直接打开app，如果用户没有安装app，那就跳...

报错详尽信息 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 关键词 canvas.toDataURL() crossOrigin Access-Control-Allow-Origin 前言 最近在做一个创意类的图...

定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性。 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = documen...

Mand Mobile使用小记 mandMobile是滴滴开源的专门面向金融场景的Vue移动端UI组件库（非金融类也可以用），最近我司正在孵化一个金融类产品，本人准备使用。 对初次使用者来说，按照官方...

如下图，最近项目中需要这么个树形结构可视化数据图形，找了好多可视化插件，没有找到可用的，所以就自己画了一个，代码如下。 树形分支是后端接口返回数据渲染，可展示多条；...

实现功能： 将桌面图片拖入指定地方，生成相框和相关信息。 相框需要自己配置，设置为背景，在CSS中设置。 效果如图： html部分： !DOCTYPE htmlhtml head meta charset=UTF-8 title/title link rel=...

为你的站点添加黑暗模式 黑暗模式 已经应用在了许多流行的网站和应用程序中，诸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你该怎样在自己的网站上添加这种模式呢? 我一直非常喜...

小编项目上最近设计有个新需求，要给汉纸加拼音，类似于加英文底部小标题类似，毕竟现在咱们中文之博大，大家都在学习和使用中文。下面就让我们学习一下吧，h5现在已经很强大...

阅读全文你将获得以下解决方案。 点击长文本编辑textarea，自动获得焦点 随着输入值自动伸缩高度 可复制添加信息 可粘贴文本 可粘贴图片 以下实例代码执行环境为Chrome80 方案一 HTM...

最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 前言 在...

来看看 HTML 的历史和规范常识。HTML 规范是 W3C 与 WHATWG 合作共同产出的，HTML5 因此也不例外。其中： W3C 指 World Wide Web Consortium WHATWG 指 Web Hypertext Application Technology Working Group 说好听了是...

最近做了一个小需求，就是点击删除按钮，弹出提示弹框让你输入验证码确认删除。 那么怎么显示从后台获取的验证码供用户输入呢？我在理解需求时还以为是后台直接把验证码发到用...

前些日子，前辈推荐了一个有趣的项目 Real-Time-Person-Removal ，这个项目使用了 TensorFlow.js ，以及 canvas 中的图像处理实现视频中的人物消失。借此机会，复习下 canvas 基础中的图像处理。...

H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能，具体实例代码如下所示： template div class=outer-scroll div class=loading top-box 默认隐藏，负一屏，手指下滑即可弹出显示，上滑隐...

直播有一个很重要的互动：点赞。 为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊需求： 点赞动作无限次，引导用户疯狂点赞 直播间的所有疯狂点赞...

1、PDF文件在线预览 1.HTML5新标签embed定义和用法 embed 标签定义嵌入的内容，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。 实例 e...

场景：为适应各种大小的屏幕 自适应布局我知道的两种方式 1.使用媒体查询，下面制定了几种适应方式，例如第一个表示屏幕宽度在320px-360px之间的，html字体大小适配为13.65px style @me...

方法一：引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击） 淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素...

关键字 meta（标签）及 Keywords（关键词），曾经在网页中很重要的，但现在已经被很多搜索引擎完全忽略。但是，如果加上这个标签也对网页的综合表现没有坏处，不过，如果使用不恰...

最近刷脸支付很火，老板们当然要追赶时代潮流，于是就有了刷脸支付这个项目。前端实现关键的技术是摄像头录像，拍照和人脸比对，本文来探讨一下如何在html5环境中如何实现刷脸...

svg让动画沿着不规则路径运动 查阅svg文档后发现，svg动画运动有两种实现方式，且都非常简单，但对于100%实现设计师给出的效果有很大的距离 使用offset-path偏移路径和offset-roate偏移角...

Html5页面在手机端做自适配是很常见的技术需求，下面介绍下在html页面使用hotcss 简介 使用动态的HTML根字体大小和动态的viewport scale。 遵循视觉一致性原则。在不同大小的屏幕和不同的...

前言 这周由于科三的考试耽误了两天，提前一天要去熟悉考场，第二天要考试，好在第二天晚上赶回来了，两天没敲代码就感觉别扭，这周写了点日志系统，写了点作业系统，果然技术...

navigator.mediaDevices.getUserMedia 应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看...

1 前言 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式...

理解： 离线存储可以将站点的文件储存在本地，在没有网络的情况下还是可以访问到存储的对应的站点的页面，这些文件可以包括html，js，css，img等等文件。但其实即使在有网络的时候...

前言 本来感觉用H5写调用电话拨号功能和发送短信功能会很不好写，后来通过实践得出，其实很简单的。 首先简单介绍一下业务功能，就是显示通讯录中的人员用户信息，然后分别点击...