<!DOCTYPE html><html><head><title>Location</title><meta charset="utf-8"></head><body><input type="button" id="btnLocation" value="获取位置信息"></body><script src="jquery.min.js"></script><script type="text/javascript">//检测是否支持地理信息function isSupportGeo(){return (navigator.geolocation!=null);}//绑定click事件 $("#btnLocation").click(function () {if(!isSupportGeo()){alert("浏览器不支持地...
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）height: viewport 的高度 （范围从 223 到 10,000 ）initial-scale: 初始的缩放比例 （范围从>0到 10 ）minimum-scale: 允许用户缩放到的最小比例maximum-scale: 允许用户缩放到的最大比例user-scalable: 用户是否可以手动缩放<meta name="apple-mobile...
js运行效率在提升编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过javaCanvas绘制效率不低Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆...
<div id="box" aaa="bbb" data-info="hello"></div><body><script>var box = document.getElementsByTagName("div")[0]; console.log(box.dataset[‘info‘]); console.log(box.id);//box console.log(box.aaa);//undefined 标签的自定义属性无法映射到对象身上 console.log(box.getAttribute(‘aaa‘));//bbb 自定义属性需要使用getAttribute进行获取/* * HTML5的属性设置与读取 * */ box.setAttribute(‘...
表单相关的属性 新增与表单相关的属性如下： 可以对 input(type=text)、select、textarea 与 button 标签指定 autofocus 属性。它以指定属性的方式让标签在画面打开时自动获得焦点。 可以对 input(type=text) 与 textarea 标签指定 placeholder 属性，它会对用户的输入进行提示，提示用户可以输入的内容。 可以对 input、output、select、textarea、button 与 fieldset 指定 form 属性，申明它属于哪个...
<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5拖放</title><script type="text/javascript">function allowDrop(ev){ev.preventDefault();//取消默认 }function drag(ev){//设置被拖数据的数据类型和值//数据类型是 "Text"，值是可拖动元素的 id ("drag1")。 ev.dataTransfer.setData("Text",ev.target.id);}//进行放置function drop(ev){ev.preventDefault();var data=ev.dataTransf...
之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。先看看最后我们实现的效果：http://www.hightopo.com/demo/fan/index.html我们先来看下这个叶轮模型长什么样 从模型上看，这个叶轮模型有三个叶片，每一个叶片都是不规则图形，显然无法用上我们HT for Web的基础图形来拼接，那么我们该怎么做呢？很简单，在HT for Web中提供了自定义图形的方案，我们可以通过自定义图形来绘制像叶片这种不...
1.快速输出静态页面2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。 ====前方高能==== （1） CSS3时序错开渐显动画这是一种比较常用的动画，它的优点是节奏感强，做法就是...
哈，首先感谢下w3cfuns的老师，嗯~ 好了，这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。 效果图： 图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。 先看下html： 复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html;charset=utf-8" http-equiv="c...
用mvc4框架 弄了好久一直弄不出来参照http://www.runoob.com/html/html5-app-cache.html上面的方法在html标签上加了manifest="demo.appcache"在iis 上MIME-type也配了 .appcache 扩展名 类型"text/cache-manifest".路由也配好了一直都不行,就这样一直报错..提示:Application Cache Error event: Failed to parse manifest还需要一步就是配置demo.appcachehttp://www.runoob.com/html/html5-app-cache.html上有说明以下是引用它的话...
一、默认FileReader会分段读取File对象，这是分段大小不一定，并且一般会很大HTML：<div class="container"><!--文本文件验证--><input type="file" id="file"/><h4>选择文件如下:</h4><blockquote></blockquote></div>JS：//读取文本文件实例var fileBox = document.getElementById(‘file‘); fileBox.onchange = function () {showFiles(); } function showFiles() {//获取选择文件的数组var fileList = fileBox.files;for (var...
1. HTML5 1.1.简要描述 HTML5中的本地存储 参考答案：很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时他想获取这些信息然后发送到服务器进行存储。现代浏览器拥有的存储被叫做“Local Storage”，用于存储这些信息。 1.2.简要描述 HTML5中 Canvas的作用 参考答案：Canvas是 HTML5出现的新标签，拥有自己的属性...
缓存是任何一个Web程序都需要重视的内容。受到Redis的启发，我想到开发一个基于HTML5 localStorage的key-value缓存框架，做了一些尝试之后，便有了Smarge这样一个产物。大家都知道，HTML5的localStorage没有超时的机制，也不能存储数组和对象等类型，更没有命令空间等思想。这些问题，在Smarge中都得到了解决。项目地址：https://git.oschina.net/jiusem/Smarge.git说明：Smarge1.0.js是完整的源代码，以Apache Lisence发布，建议调...
最近项目中遇到的问题如下： 利用html5中的 video 标签去播放视频，但是发现有的mp4格式的视频可以播放，有的mp4格式的视频不能播放。视频格式 首先 video 标签只支持MPEG4，Ogg，WebM 三种视频格式，浏览器支持情况如下：但是，video标签对这三种视频格式是有具体要求的Ogg = 带有 Theora 视频编码 + Vorbis 音频编码 MPEG4 = 带有 H.264 视频编码 + AAC 音频编码 WebM = 带有 VP8 视频编码 + Vorbis 音频编码所以，就...
码，如以下：<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>购买大厅</title> <%@include file="../../include/include.jsp"%> <%@include file="../../include/main.jsp"%> <body style="background-color: #514f4f;overflow: hidden;"> <div class="nav" style="height:43px;line-height:43px;background-color: #CC0000;display:block;"><p>幸...