使用原生的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>
分享到：
相关推荐
四五个页面，简单好看，适合测试效果之类的啊啊啊啊啊啊
该资源包含了一个indexdb学习的简单demo，包含了增删改查，以及索引的创建和使用，可以参考博客http://blog.csdn.net/mockingbirds/article/details/48749375
Html+css 简单demo 这次学到的是div设置背景透明而内元素不会透明
海康视频H5player播放简单demo
手机页面h5的简单demo，信息录入和展示的一些页面简单设计，采用html5，效果图可以到个人博客上面找
该资源包含了一个使用html5使用离线缓存的简单demo，具体可以参考博客http://blog.csdn.net/mockingbirds/article/details/48412967
springboot+mybaits+html+mysql简单demo
html5直播视频浏览demo，通过ffmpeg做服务，将rtsp流转换为hls。在通过videoJS将其播放出来。包内包含配置，安装文件，完整流程demo代码。由于是研究使用，所以demo较为简单，但是功能已经完全实现。包括代码启动...
基于HTML5+css3实现的两人即时通讯聊天界面，界面风格相当漂亮，可直接使用，也可简单修改为自己想要的样式，仅供大家参考。
平台和web简单demo，基于java，html，js，jquery. html向平台提交数据，平台处理数据，并返回值，显示在html上
一个用html5模仿flash的动画广告demo,html5富媒体广告构思
基于thinkjs的简单demo,包括登录注册,信息发布/编辑/删除使用本产品需要以下知识:Nodejs、thinkjs、ejs、mysql、html、css、jquery供学习使用，只完成了基本功能，未做界面和程序上的进一步优化，细节需自行调整。...
APP点餐系统，HTML,JS,CSS编写。适用于iphone，流行安卓机，web浏览器，简单修改即可使用。购物车，订单等等页面
html 3d显示简单 demo Don't download . if you need it .please go to github
knockout 简单的demo，实现了foreach及基本的数据绑定 详细aip参考http://knockoutjs.com/documentation/introduction.html 中文翻译参考 http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
Android下使用ListView的简单Demo，详细可以参见博客。http://www.cnblogs.com/plokmju/p/android_ListView.html
帮朋友写的一个最简单的demo，使用http://127.0.0.1:8080/upload/upload 访问
一个简单的例子，前端使用一个h5video标签，向服务端请求视频文件并进行播放。 服务端采用springboot，maven。
使用flyingsaucer 将html转成pdf的简单demo
这个是从原生的html5实现的一个后台管理系统左侧菜单栏自动伸缩的二级菜单功能，使用iframe。实现简单示例！