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