HTML5 - 随笔分类 - vsmart

websocket 长链接

摘要：由于公司要用h5页面实现付款码页面的B扫C功能，所以在H5页面需要需服务端保持通信实现当B端商户用POS机扫二维码时H5页面能时时展示支付状态，而经过调研H5端可以使用WebSocket实现该功能，特此记录。注：以下内容转自：https://www.cnblogs.com/wei2yi/archi 阅读全文

posted @ 2018-07-25 07:49 vsmart 阅读(512) 评论(0) 推荐(0)

HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

摘要：一、HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端，客户端通过请求响应的方式从服务器获得数据，这样集中存储也会给服务器带来相应的压力，有些数据可以直接存储在客户端，传统的Web技术中会使用Cookie，但Cookie有一些缺点，为了说明这个缺点我们先看看当提交表单时会有那些信息会被浏阅读全文

posted @ 2018-07-05 09:28 vsmart 阅读(540) 评论(0) 推荐(0)

有关去掉谷歌及火狐浏览器文本框数字类型上下箭头的方法

摘要：在chrome下： input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } Firefox下： input[type="n 阅读全文

posted @ 2018-02-02 10:08 vsmart 阅读(289) 评论(0) 推荐(0)

H5图片异步拖拽上传

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{width: 200px; height: 200px; background: red; margi 阅读全文

posted @ 2017-06-02 15:33 vsmart 阅读(190) 评论(0) 推荐(0)

H5播放器有时获取duration的值为NaN？

摘要：function getDuration() { var timeset = null; timeset = setTimeout(function () { var duration = ov.duration; if(isNaN(duration)){ getDuration(); }else{ 阅读全文

posted @ 2017-05-26 14:49 vsmart 阅读(701) 评论(0) 推荐(0)

Canvas入门（3）:图像处理和绘制文字

摘要：来源：http://www.ido321.com/997.html 一、图像处理(非特别说明，所有结果均来自最新版Google) 在HTML 5中，不仅可以使用Canvas API绘制图形，也可以用于处理网络或磁盘中的图像文件，然后绘制在画布中。绘制图像时，需要使用drawImage()方法： dr 阅读全文

posted @ 2017-05-12 16:16 vsmart 阅读(327) 评论(0) 推荐(0)

canvas时钟

摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟canvas</title> <script> window.onload = function(){ var oc = document.getEleme 阅读全文

posted @ 2017-04-16 17:59 vsmart 阅读(186) 评论(0) 推荐(0)

canvas 鼠标划线

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> body{background: #000;} #c1{background: #fff;} </style> < 阅读全文

posted @ 2017-04-11 11:14 vsmart 阅读(209) 评论(0) 推荐(0)

h5历史管理

摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>h5历史管理</title><script>window.onload = function(){ var odiv = document.querySelector( 阅读全文

posted @ 2017-04-10 14:29 vsmart 阅读(208) 评论(0) 推荐(0)

你必须知道的28个HTML5特征、窍门和技术

摘要：翻译-你必须知道的28个HTML5特征、窍门和技术 by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1058 原文地址：http://net…html5-features- 阅读全文

posted @ 2017-04-10 11:44 vsmart 阅读(201) 评论(0) 推荐(0)

有关android及ios手机中 input 调出数字键盘

摘要：有关android及ios手机中 input 调出数字键盘只需要添加 type="number" pattern="[0-9]*" 属性。阅读全文

posted @ 2017-04-07 17:16 vsmart 阅读(298) 评论(0) 推荐(0)

H5 项目常见问题汇总及解决方案

摘要：H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面空白页基本meta标签空白页基本meta标签其他meta标签其他meta标签常见问题：移动端如何定义字体font-family 移动端如何阅读全文

posted @ 2017-03-31 10:53 vsmart 阅读(573) 评论(0) 推荐(0)

移除HTML5 input在type="number"时的上下小箭头

摘要：在chrome下： input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } Firefox下： input[type="n 阅读全文

posted @ 2017-03-30 08:36 vsmart 阅读(146) 评论(0) 推荐(0)

div 可编辑及placeholder设置并且可以去掉默认边框

摘要：<div contenteditable="true" class="ipt" placeholder="输入个人介绍，最多输入200个字"></div> 样式： /*为空时显示 element attribute content*/.ipt:empty:before{ content: attr( 阅读全文

posted @ 2017-02-15 11:49 vsmart 阅读(750) 评论(0) 推荐(1)

H5项目常见问题及注意事项

摘要：Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面空白页基本meta标签空白页基本meta标签其他meta标签其他meta标签常见问题：移动端如何定义字体font-family 移动端如何定义字体font-famil 阅读全文

posted @ 2017-02-09 09:50 vsmart 阅读(413) 评论(0) 推荐(0)

Canvas API

摘要：概述绘图方法图像处理方法 drawImage方法 getImageData方法，putImageData方法 toDataURL方法 save方法，restore方法动画像素处理灰度效果复古效果红色蒙版效果亮度效果反转效果参考链接概述绘图方法图像处理方法 drawImage 阅读全文

posted @ 2017-01-22 10:32 vsmart 阅读(167) 评论(0) 推荐(0)

HTML5 28个新特性

摘要：1. 新的Doctype 尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src=”path/to/image” alt=”About im 阅读全文

posted @ 2017-01-22 10:27 vsmart 阅读(210) 评论(0) 推荐(0)

将HTML5 Canvas的内容保存为图片图文全成

摘要：<html>  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-sc 阅读全文

posted @ 2017-01-18 14:31 vsmart 阅读(332) 评论(0) 推荐(0)

手机移动端初始rem 1rem = 100px

摘要：(function setDevice(deviceW){ var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth/devic 阅读全文

posted @ 2017-01-17 14:05 vsmart 阅读(371) 评论(0) 推荐(0)

随笔分类 - HTML5