使用原生的HTML5元素替代以前需Js才能实现的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关于HTML5 新特性 解决以前需结合js才能实现的提示功能，安全零js</title>
</head>
<body>
<div >
<form action="html5_解决以前js才能实现的功能.html" method="get">
文本框指定type为URL：提交不符合的进行提示框：<br /><input type='url' name='use_url'/>
<input type="submit" /><br />
</form>
</div>
<div >
<form action="html5_解决以前js才能实现的功能.html" method="get">
文本框指定type为number类型：提交不符合的进行提示框，并且最大值设置为20，最小值为1：<br /><input type="number" name='use_url' min='1' max='20'/>
<input type="submit" /><br />
</form>
</div>
<div >
<form action="html5_解决以前js才能实现的功能.html" method="get">
<br /><input type="range" name='range' min='1' max='30'/>
<input type="submit" /><br />
</form>
</div>
<br />
<div >
<div>不在需要日期控件，纯html代码：</div>
<form action="html5_解决以前js才能实现的功能.html" method="get">
type指定为date：<br /><input type="date" name='date'/>
<input type="submit" /><br />
</form>
<form action="html5_解决以前js才能实现的功能.html" method="get">
type指定为month：<br /><input type="month" name='month'/>
<input type="submit" /><br />
</form>
<form action="html5_解决以前js才能实现的功能.html" method="get">
type指定为week：<br /><input type="week" name='week'/>
<input type="submit" /><br />
</form>
<form action="html5_解决以前js才能实现的功能.html" method="get">
type指定为time：<br /><input type="time" name='time'/>
<input type="submit" /><br />
</form>
<form action="html5_解决以前js才能实现的功能.html" method="get">
type指定为datetime：<br /><input type="datetime" name='datetime'/>
<input type="submit" /><br />
</form>
<form action="html5_解决以前js才能实现的功能.html" method="get">
type指定为datetime-local：<br /><input type="datetime-loca" name='datetime-loca'/>
<input type="submit" /><br />
</form>
</div>
<br />
<div>
<div>表单重写 测试本form 为当前的html 下面测试重写到 www.hao123.com</div>
<form action="html5_解决以前js才能实现的功能.html" method="get">
<input type="submit" formaction="http://www.hao123.com" /><br />
</form>
</div>
<div>
<br />
<div>使用新属性list ,datalist替代select ,</div>
<form action="html5_解决以前js才能实现的功能.html" method="get">
<br /><input type="url" list='url_list'/>
<datalist id="url_list">
<option label="hao123" value="http://www.hao123.com"/>
<option label="新浪" value="http://www.sina.com" />
<option label="百度" value="http://www.baidu.com" />
</datalist>
<input type="submit" formaction="http://www.hao123.com" /><br />
</form>
</div>
<br />
<div>使用新属性multiple实现一次性选择多个文件</div>
<form action="html5_解决以前js才能实现的功能.html" method="get">
<br /><input type="file" multiple="multiple"/>
<input type="submit" /><br />
</form>
</div>
<br />
<div>canvas结合js实现雨伞旋转</div>
<canvas id="myCanva" width="700" height="300"></canvas>
</div>
<script>
function drawTop(ctx,fillStyle){
ctx.fillStyle=fillStyle;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true);
ctx.closePath();
ctx.fill();
}
function drawGrip(ctx){
ctx.save();
ctx.fillStyle="blue";
ctx.beginPath();
ctx.strokeStyle='blue';
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function createDraw(){
var ctx =document.getElementById("myCanva").getContext("2d");
ctx.translate(150,150);
for(var i=1;i<9;i++){
ctx.save();
ctx.rotate(Math.PI*(2/4+i/4));
ctx.translate(0,-100);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore();
}
}
window.onload=function(){
createDraw();
}
</script>
</body>
</html>
分享到：
相关推荐
HTML5手机端APP简单demo是用于展示HTML5技术在移动端应用的一个实例，它通常包含多个页面，用于测试和展示HTML5的各种功能和特性。在这个demo中，我们可以看到开发者设计了四五个页面，这些页面可能包括启动页、主页...
H5，全称HTML5，是第五代超文本标记语言，是构建Web内容的一种标准。它的出现极大地提升了Web应用的用户体验，增强了网页的交互性，为开发者提供了更强大的功能和工具。在H5中，前端开发不仅限于简单的静态页面展示...
本“手机页面H5的简单demo”旨在展示如何利用HTML5来创建适用于手机的网页应用，尤其是信息录入和展示的功能。下面将详细介绍这个demo涉及的关键知识点。 首先，HTML5是超文本标记语言（HTML）的最新版本，它引入了...
该资源包含了一个indexdb学习的简单demo，包含了增删改查，以及索引的创建和使用，可以参考博客http://blog.csdn.net/mockingbirds/article/details/48749375
这个“海康视频H5player播放简单demo”是针对该库的一个基础示例，旨在帮助开发者快速理解和集成H5player到他们的项目中。 在H5player中，你可以期待以下关键知识点： 1. **HTML5 Video API**：H5player基于HTML5...
6. **Video和Audio元素**：HTML5内置的和元素使得在网页中嵌入多媒体内容变得简单，无需依赖Flash或其他插件。 7. **Geolocation API**：这个API允许网页获取用户的地理位置信息，为开发基于位置的服务提供了便利。...
在这个简单的Demo中，我们看到了如何利用HTML和CSS的组合实现特定的视觉效果。这种技巧常用于创建悬浮窗口、透明背景的导航栏等设计。了解并掌握这些基本知识对于任何前端开发者来说都是至关重要的，它们构成了网页...
这个“html5 audio demo”是一个示例，展示了如何使用HTML5的`<audio>`标签来创建自定义样式的音频播放器，并实现播放控制功能。 一、HTML5 `<audio>` 标签 `<audio>`标签是HTML5引入的新元素，用于在网页上嵌入...
5. **WebRTC**：提供浏览器间的实时通信能力，DEMO可能是一个简单的视频通话应用。 通过深入研究这个资源，你将能够掌握HTML 5的基本概念和实用技巧，进一步提升你的Web开发技能。同时，不要忘记结合PPT中的理论...
"简单的appdemo。h5页面" 这个标题暗示了这是一个基于H5技术构建的简单应用程序的示例。H5是HTML5的简称，是一种用于创建网页和应用程序的标记语言，它提供了丰富的功能和交互性，使得开发者能够创建出更加动态和...
在“html5离线缓存简单demo”中，我们可以看到两个主要的文件夹：`webworkers`和`html5cache`。`webworkers`通常与HTML5的工作线程（Web Workers）有关，而`html5cache`可能包含了离线缓存的相关配置和资源。 1. **...
此外，HTML5提供了多媒体支持，如 `<audio>` 和 `<video>` 标签，使得在网页中嵌入音频和视频变得简单。还有离线存储机制（离线储存API）、拖放功能、Canvas绘图、SVG矢量图、Geolocation定位等，极大地丰富了Web...
在这个“高德地图开发简单demo”中，我们将深入探讨如何利用高德地图API进行基本的开发工作。 首先，我们要了解高德地图API的基本概念。API（Application Programming Interface）是一组预先定义的函数，允许开发者...
"video-record-demo_html5_DEMO_"这个项目就是关于如何在HTML5环境下实现视频录制的一个示例。 首先，HTML5的MediaStream API允许访问用户的摄像头和麦克风。`<input type="file" capture>`元素或者`navigator....
【描述】：“简单demo简单demo简单demo简单demo简单demo简单demo” 描述中的重复强调了“简单demo”，这可能意味着我们要关注的是易于理解和实现的示例。在编程教学中，简单的Demo常用于引导初学者逐步掌握编程语言...
虽然HTML5 Canvas提供了丰富的绘图功能，但CSS3动画对于某些简单的动画效果，如元素淡入淡出、旋转等，更具有效率和易用性。开发者可能使用CSS3来处理地图外的元素，比如控制按钮或者指示器的动画效果。 JavaScript...
html5直播视频浏览demo，通过ffmpeg做服务，将rtsp流转换为hls。在通过videoJS将其播放出来。包内包含配置，安装文件，完整流程demo代码。由于是研究使用，所以demo较为简单，但是功能已经完全实现。包括代码启动...
"Demo.rar_DEMO_html5 重力球_html5游戏demo_重力游戏"是一个基于HTML5的重力球滚动游戏示例，通过这个项目我们可以深入理解HTML5在游戏开发中的应用。 首先，我们要了解HTML5中的`<canvas>`元素，它是HTML5新增的...
**jQuery图表简单Demo详解** 在Web开发中，数据可视化是一个重要的环节，能够帮助用户更直观地理解复杂的数据信息。jQuery，作为一个广泛使用的JavaScript库，虽然并非专为图表设计，但结合其他图表插件，可以轻松...
HTML5引入了新的媒体元素，如`<audio>`和`<video>`，使得在网页中嵌入多媒体内容变得更加简单。 4. `js`文件夹：很可能包含了项目的JavaScript代码，包括Create.js库和其他可能的自定义脚本。这些脚本负责处理交互...