![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
樊小书生
前端开发工程师
展开
-
chrome多tab页video播放问题
最近在做大屏项目,在研发测试阶段,一切正常,在投放线上的时候,线上是在一台机器上同时打开10来个chrome tab页,这个时候测试反馈说线上查看的时候页面视频很卡,页面刷新视频就动了一下就不动了,我在自己本地页面也试了下,chrome 同时打开 10 个 tab 页播放视频,确实是视频动了一下就不播放了。视频多是采用如下方案,进入页面之后自动播放:或者按理说是没问题的,最后在网上查资料,说是可能硬件加速的一些问题,在 chrome 浏览器的搜索框中搜索 , 在页面中再搜索 :需要将上述两项搜索结果原创 2022-12-04 11:51:44 · 2294 阅读 · 0 评论 -
html5本地存储localStorage 存储json对象存储格式问题
html5本地存储localStorage 存储json对象存储格式问题转载 2017-07-25 22:28:03 · 780 阅读 · 0 评论 -
web uploader在Firefox下上传点击无效的解决方法
在公司项目中,做一个上传文件的功能,选用了百度的web uploader,按照官网上面的方法,写好之后,在chrome下面没有任何问题,可是在Firefox下面怎么点击都没有效果?原创 2017-10-30 21:26:31 · 2060 阅读 · 0 评论 -
如何简单修改input的placeholder样式
input的placeholder样式修改原创 2017-12-28 21:07:08 · 4413 阅读 · 0 评论 -
代码实现input的value值选中HTMLInputElement.setSelectionRange()
假如说有如下的需求: input的value部分有用,部分无用,我们希望input框获取焦点的时候直接选中无用的部分。我们就需要用到下面的主角:HTMLInputElement.setSelectionRange(),支持我们设置开始位置和结束位置,来实现input的选中效果。原创 2017-10-26 22:24:43 · 3700 阅读 · 0 评论 -
textarea的字数限制
功能描述在项目中我们经常会遇到要对textarea进行输入字符数的限制,并在下方提示共可输入多少文字,已输入多少,还可输入多少的类似功能。所以就有了下面封装好的这个函数,不管是以那种方式输入,字数都可以完美的限制。原创 2018-01-30 22:47:54 · 995 阅读 · 0 评论 -
textarea高度自适应
之前虽然写了几篇关于textarea的高度自适应的解决方案,但都不甚满意,最近从Element的源码中得到启示,就自己写了一个textarea高度自适应的jquery插件。所以就有了本篇博客的介绍: autoHeightTextarea自适应高度的textarea是一款jquery插件,支持链式调用,支持设置最小行数、最小高度、最大行数和最大高度,在输入文字的时候实现textarea的高度自原创 2018-01-07 17:15:46 · 4696 阅读 · 0 评论 -
在Android浏览器下字体偏上的问题
在Android浏览器下,使用以下几种方式进行字体垂直居中的时候都会导致字体偏上:使用line-height 来使字体垂直居中使用padding 来使字体垂直居中本文主要说的是使用<html>标签的lang属性设置为zh-CN 来处理以上问题。<html>标签的lang<html>标签的lang 属性可用于网页或部分网页的语言。这对搜索引擎...原创 2018-06-27 22:55:52 · 2241 阅读 · 0 评论 -
iphone的Safari浏览器中HTML5上传图片方向问题解决方法
前段时间在上传图片的时候前端使用FileReader将图片读到内存,使用canvas进行压缩,然后上传,在安卓手机上没有问题,但是在iphone的Safari浏览器中一直存在图片方向不正的问题,经过多方面检查才明白,原因可以查看此处:图片方向有误的原因 。接下来来说解决方案:首先可以使用GitHub上的exif.js (exif.js的翻译)来读取图片的Orientation 元数据,在根...原创 2018-09-09 16:34:59 · 4975 阅读 · 0 评论 -
video标签去除下载按钮
HTML中直接使用video来播放视频,在Chrome浏览器、360浏览器、QQ浏览器(以及其他一些使用Chrome内核Blink)等中都会出现下载按钮,但我们一般又不希望出现下载按钮。好像是从Chrome 54版本开发有下载按钮的(从网上看到的,我也不确定),网上有css解决方案,如下:video::-internal-media-controls-download-button { ...原创 2018-10-29 21:08:34 · 15368 阅读 · 0 评论 -
javascript简单实现数据双向绑定
数据双向绑定主要会用Object.defineProperty(),关于它的用法可查看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty。可以直接点击查看例子。代码实现如下:<!DOCTYPE html><html l...原创 2018-11-22 19:37:38 · 1041 阅读 · 0 评论 -
input type所有功能
input输入框,常用的type属性有button/submit/text/password/checkbox/radio/hidden/file/number等等,随着技术不断的发展,input的功能也越来越强大,现在开始支持date/color/email/url等等新功能,下表是总结的现有的input的所有type属性。原创 2017-04-25 22:07:35 · 14851 阅读 · 0 评论 -
移动端页面滑动,菜单到顶部之后定位在顶部(position: sticky;)
在移动端的页面中,我们会遇到有一部分是一直显示的,比如说菜单项,当页面初始化的时候,它处在文档流内,当页面下滑的时候,并且菜单到达顶部之后就会一直定位在顶部,并且上滑的时候,菜单又会回到文档流。到这里大家应该会有点思路,定位在顶部不动了,那就肯定用了position: fixed;,再实现可以回到文档流,那这一块就最好使用定位布局,方便控制。下面是我根据这个来写的一个:<!DOCTYPE html>原创 2017-03-30 21:35:36 · 14091 阅读 · 5 评论 -
HTML5中input背景提示文字(placeholder)的CSS美化
HTML5中input背景提示文字(placeholder)的CSS美化,让你的网站看起来更加精美转载 2016-09-06 22:52:48 · 1004 阅读 · 0 评论 -
meta标签如何实现重定向<meta http-equiv="refresh" content="0; url=">
<meta http-equiv="refresh[刷新-这里指定动作]" content="5[这里是时间];url=/article[这里是跳转的URL]">原创 2016-10-08 13:32:43 · 4892 阅读 · 0 评论 -
实时监听input中值变化oninput & onpropertychange
在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案:结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。原创 2016-10-15 14:41:58 · 2057 阅读 · 0 评论 -
html5 WEB缓存
HTML5 提供了两种在客户端存储数据的新方法: 1、localStorage - 没有时间限制的数据存储 2、sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中,数据不是由每个服务器请求原创 2016-09-03 23:27:34 · 481 阅读 · 0 评论 -
纯html、css3、js的时钟
基于原生js和css3的时钟原创 2016-08-14 23:01:36 · 679 阅读 · 0 评论 -
七夕程序员的表白神奇
为了程序员们的幸福,加油原创 2016-08-09 13:18:43 · 7027 阅读 · 2 评论 -
原生js与css3结合的电风扇
使用原生js与css3的一些属性结合的可以换档位的电风扇原创 2016-07-29 15:51:05 · 1779 阅读 · 1 评论 -
Ionrangeslider.js的使用
Ionrangeslider.js是一个不错的,舒适,易于定制的范围滑块,支持自定义皮肤。还支持事件和公共方法,具有灵活的设置,完全可以用CSS改变。它支持触摸的设备,兼容性支持 iPhone, iPad, Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)。这里主要介绍使用,API之后会补上。原创 2017-01-18 23:07:11 · 12271 阅读 · 3 评论 -
移动前端头部标签(HTML5 head meta)--转
移动端的meta标签转载 2017-03-14 19:07:39 · 951 阅读 · 0 评论 -
HTML canvas一些你可能忽视的自带属性
介绍一下canvas的一些你可能忽视的自带属性原创 2016-08-21 21:02:34 · 5950 阅读 · 0 评论