使用原生的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.οnlοad=function(){
createDraw();
}
</script>
</body>
</html>
<!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.οnlοad=function(){
createDraw();
}
</script>
</body>
</html>
5404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
