<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo5</title>
<!--链接美化CSS--> <!--a 链接未被访问 a:visited 链接滑被访问 a:hover 划过链接 text-decoration underline 有线 none 没线-->
<style type="text/css">
a{
color: red;
text-decoration: none;
border-bottom: 5px potted red;
}
a:visited{
color: blue;
text-decoration: underline;
}
a:hover{
color: yellow;
text-decoration: none;
padding-bottom: 15px;
background: url(MySource/images/Card/Plants/BoomWallNut.png) bottom repeat-x;
}
</style>
</head>
<body>
<!--图像对齐-->
<img width="1024" align="left" src="MySource/dog.jpg"> <!--居中在img标签中不起作用-->
<!--与文本对齐方式,控制与文本距离,添加边框-->
<img style="vertical-align: middle" src="MySource/dog.jpg" hspace="30" vspace="30" border="2" > <h4>你好</h4><p></p> <!--|text-top|text-bottom-->
<!--水平线 -->
<hr align="center" width="1024" size="10">
<!--链接 文本，邮箱，链接美化-->
<a href="demo4.html">demo4.html</a>
<a href="mailto:1984852655@qq.com?subject=联系我;body=告诉我">告诉我</a>
<!--链接 同一页面 -->
<a href="#概述">概述</a>
<h1><a id="概述">概述</a></h1>
<!-- 链接美化 <body link="teal" alink="red" vlink="blue">-->
<!-- 热点区域链接-->
<img src="MySource/images/Card/Plants/BoomWallNut.png" usemap="#Map">
<map name="Map">
<area shape="rect" coords="16,266,108,349" href="demo4.html">
</map>
<!-- 表单属性，input，textarea，select-->
<form action="demo4.html"
method="post"
name="some"
id="some1"
enctype="text/plain"
target="_blank"
novalidate
>
<!--表单域，可以用来将表单分组-->
<fieldset>
<!--出现在表单域左上角-->
<legend>测试</legend>
<input type="text" value="niaho" size="20" maxlength="20" name="y">
<input type="password" value="niaho" size="20" maxlength="20" name="x"><br>
<input type="checkbox" name="z" checked="checked">我爱你啊
<input type="checkbox" name="z" checked="checked">我不爱你<p></p>
<input type="radio" name="onechoice" value="2" checked="checked">王源
<input type="radio" name="onechoice" value="1">王俊凯 <!--通过name区分是不是一组-->
<input type="radio" name="onechoice" value="3">千禧<br>
</fieldset>
<input type="hidden" name="somehidden" value="some"> <!--隐藏数据，页面跳转keyong-->
<input type="submit" value="提交">
<input type="image" alt="确定" src="Plants/Cabbagepult.png"> <!--image样式的表单，数据提交到服务器-->
<input type="reset" value="复位"><br><br>
<input type="button" value="运行" onclick="calculate()"><br><br>
<!-- multiple同时选择多个文件上传 accept规定上传文件类型-->
<input type="file" name="uploadfile" id="uploadffile"
multiple accept="image/jpeg"/><br><br> <!--挑选文件上传。必须在form中说明编码方式-->
<!--文本域 -->
<textarea name="some" rows="10" cols="50" value="say">请文明用语</textarea><br><br>
<!-- 下列表单-->
谁最好看:
<select name="谁最好看">
<optgroup label="Team1">
<option>王文萱</option>
<option>王文萱</option>
<option>王文萱</option>
</optgroup>
<optgroup label="Team2">
<option>王文萱</option>
<option>王文萱</option>
<option>王文萱</option>
</optgroup>
</select><br><br>
</form>
<!-- url-->
<input type="url" name="WebURL" id="webu1" value="http://www.naidu.com"><br><br>
<!-- email-->
<input type="email" name="WebE" id="webe" value="1984852655@qq.com"><br><br>
<!-- range,滑动条-->
<input type="range" name="volume" id="volume" min="0" max="100" step="0.2"><br><br>
<!-- 输出？？？？还没有弄懂-->
<output name="x"></output><br><br>
<!-- number，输入数字-->
<input type="number" name="volum" id="volum" min="0" max="100" step="0.2"><br><br>
<!-- tel-->
<input type="tel" name="WebT" id="webt" value="18242027035" invalid="invalidHandler()"><br><br>
<!-- search-->
<input type="search" name="WebS" id="webs" value="王文萱"><br><br>
<!-- color-->
<input type="color" name="WebC" id="webc" ><br><br>
<!-- date,month,week,time,datetime,datetime-local-->
<input type="date" name="WebD" id="webd"><br><br>
<!-- 新增表单特性 form formaction formmethod formenctype formnovalidate formtarget
placeholder,antufocus,autocomplete,list,datelist,keygen,output-->
<!--formaction formmethod formenctype formnovalidate formtarget分别可以覆盖表单的属性-->
<!-- placeholder提示信息，得到焦点是信息消失 autofocus自动获得焦点 autocomplete自动完成，历史记录在下拉菜单里 data选值列表 keygen实现非对称加密-->
<datalist id="emaillist">
<option value="1984852655@qq.com">1984852655@qq.com</option>
<option value="1984852656@qq.com">1984852656@qq.com</option>
</datalist>
<!--keygen实现非对称加密-->
<keygen name="security"/>
<!--表单元素属性required不能为空 pattern是一个正则表达式，验证格式 novalidate不验证-->
<input type="text" size="20" maxlength="20" form="some1" placeholder="请输入信息"
autofocus autocomplete="on" list="emaillist" required pattern="[0-9]{6}"
><br><br>
<script type="text/javascript">
var vali=document.getElementById("some1").validity; //返回ValidityState对象
var vailii=document.getElementById("some1").willValidity; //表示表单是否需要验证
var vailiil=document.getElementById("some1").validationMessage; //获取错误提示信息
//ValidityState对象属性
//valueMissing typeMismatch patternMismatch tooLong rangeUnderflow
//rangeOverflow stepMismatch customError 使用自己定义的验证错误信息 true 自定义
//checkValiity验证函数
function CheckForm(frm){
if(frm.webd.checkValidity()){ //checkValiity验证函数
alert("点子邮件正确");
}
}
</script>
<script type="text/javascript">
//setCustomValitity修改错误提示信息 }
//invalid事件，有元素没有通过验证时触发
//监听invalid事件,上面
window.onload=function(){
var register=document.getElementById("register");
register.addEventListener("invalid",invalidHandler,true);
document.getElementById("cage").setCustomValidity("年龄不符合规定");
}
function addError(err){
document.getElementById("error".innerHTML)="*"+err+"<br/>";
}
function clearError(){
document.getElementById("error").innerHTML="";
}
function invalidHandler(evt){
var validity=evt.srcElement.validity;
var src="";
if(validity.customError){
str=evt.srcElement.validationMessage;
}else{
if(validity.valueMissing){
str+="不能为空"
}
}
addError(str);
evt.stopPropagation();
evt.preventDefault();
}
</script>
<!-- Audio Vidoo-->
<!-- autoplay自动播放 controls显示控制条 loop循环播放 preload预加载,有autoplay时忽略,none不预加载，metadata只加载元数据，auto全部加载，默认auto. poster（video特有)用图片替代video width和height video特有-->
<br><br><br><br>
<audio src="MySource/horse.mp3">
<!--不支持时代替-->
您的浏览器不支持
</audio>
<video src="MySource/movie.mp4" preload="auto" >
<!--也可以加source>
<!--不支持时代替-->
您的浏览器不支持
</video>
<h2><pre>
接口属性:
currentSrc得到url地址 videoWidth videoHeight currentTime startTime
duration volume muted是否静音 ended played:获得TimesRanges对象，包括播放部分的开始结束时间 paused error错误代码 seeking是否正在请求媒体数据
seekable,获取媒体资源已经请求的TimesRanges对象，包括已请求部分的开始结束时间
networkState,获取媒体资源的加载状态
buffered，获取本地缓存的媒体数据的TimesRanges对象
readyState:当前媒体播放的就绪状态
playbackRate：获取/设置媒体的播放速率
defaultPlaybackRate:获取/设置媒体默认的播放速率
</pre></h2>
<!-- 脚本检查浏览器是否支持-->
<!--<script type="text/javascript">
var supprt=!!document.getElementById("audio").canPlayType();
</script>-->
<!-- audio和video的接口方法-->
<h2><pre>
load()加载媒体文件
play()播放媒体文件
pause()暂停媒体文件
canPlayType(type) 测试浏览器是否支持
</pre></h2>
<!-- video audio的接口事件-->
<h2>
<pre>
video audio的接口事件：
play
playing
pause执行了pause()触发
timeupdate 播放位置被改变时触发
ended
waiting等待下一帧时
ratechange
volumechange
canplay以当前播放速率，需要缓冲触发
canplaythrough以当前播放速率，不需要缓冲触发
durationchange
loadstart 浏览器开始在网上寻找数据
progress 浏览器正在获取媒体文件
suspend 浏览器暂停获取，且文件获取并没有正常结束
abort 中止获取媒体文件，但不是应为错误
error 获取媒体过程中出错
emptied 网络变为初始化状态
stalled 浏览器尝试获取媒体数据时失败
loadedmetadata 加载玩媒体元数据
loadeddata 加载完当前位置的媒体播放数据
seeking 浏览器正在请求数据
seeked 浏览器停止请求数据
</pre>
</h2>
<!-- 拖放API draggable a和img元素默认可拖-->
<input type="checkbox" value="王源" draggable="true">王源
<!-- 鼠标拖动事件-->
<h2>
<pre>
鼠标拖动事件：
dragstart drag dragenter dragover dragleave drop dragend
</pre>
</h2>
<!-- DataTransfer对象，支持拖拽数据的存储-->
<h2>
<pre>
DataTransfer对象，支持拖拽数据的存储：
dropEffect设置或获取拖拽操作的类型和要显示的光标类型 none copy copyLink move
effectAllowed设置或获取数据传送操作可应用于该对象的源元素
none copy copyLink copyMove link linkMore move all aninitialized
types:获取dragStart时间出发时为元素存储数据的格式
files：获取存储在DataTransfer中正在拖放的文件列表FileList
clearData（[sDataFormat]）:Text,URL,File,HTML,Image.没有参数清除全部数据
setData([sDataFormat],[data]):Text,URL
getData（[sDataFormat]）:Text,URL
setDataImage（[imgElement],x,y）
addElement([element])
</pre>
</h2>
<!-- 拖动元素-->
<div id="dragSource" draggable="true">拖这里<img src="MySource/images/interface/Almanac_PlantBack.jpg" height="72" width="75"></div>
<div id="dropTarget"><br><br><br><br><br>
<br></div>
<script type="text/javascript">
function DragStart(){
var source=document.getElementById('dragSource');
source.addEventListener('dragstart',function(e){
//e.target引起时间的对象。innerHTML对应的HTML代码
e.dataTransfer.setData('text/plain',e.target.innerHTML);
e.dataTransfer.effectAllowed='copy';
},false);
}
window.addEventListener('load',DragStart,false);
function DragOver(){
var target=document.getElementById('dropTarget');
target.addEventListener('dragover',function(e){
this.className='dragover';
e.preventDefault();
},false);
}
window.addEventListener('load',DragOver,false)
function Drop(){
var source=document.getElementById('dropTarget');
source.addEventListener('drop',function(e){
var data=e.dataTransfer.getData('text/plain');
this.innerHTML+=data;
e.dataTransfer.dropEffect="copy";
this.className="";
},false);
}
window.addEventListener('load',Drop,false);
</script>
<!-- FileList对象中的每一个文件又是一个File对象-->
<!-- Blob对象原始二进制数据 size type slice()文件切割，返回新的Blob对象
File继承了Blob，也能用Blob方法，属性-->
<form action="" method="post">
<input type="file" name="uploadfile" id="files"
multiple accept="image/*"/>
<input type="button" value="显示" onClick="showFiles()"/></form>
<div id="msg"></div>
<script>
function showFiles(){
var filelist=document.getElementById("files").files;
var msg=document.getElementById("msg");
for(var i=0;i<filelist.length;i++){
msg.innerHTML+=filelist[i].name+"<br/>";
msg.innerHTML+="文件长度"+filelist[i].size+"<br/>";
msg.innerHTML+="文件类型"+filelist[i].type+"<br/>"+"<br/>";
}
}
</script>
<!-- FileReader接口，读取文件内容-->
<!-- 判断是否支持-->
<script type="text/javascript">
if(typeof FileReader == "undefined"){
alert("浏览器未实现FileReder接口")
}else{
var flie=new FileReader();
}
</script>
<!-- 接口属性-->
<h2><pre>
readyState 文件状态
1.EMPTY没有读取
2.LOADUING正在读取
3.DONE读取完毕
error 读取过程中的错误
1.NotFoundError
2.SecurityError安全错误
3.NotReadableError无法读取
4.EncodingError编码限制，通常是数据的URL表示的网址长度限制
</pre>
</h2>
<!--接口方法 -->
<h2><pre>
1.readAsArrayBuffer(Blob);文件读取为数组缓冲区
2.readAsBinaryString（Blob）;读取为二进制字符串
3.readAsText(blob,encoding) 默认UTF-8,读取为文本
4.readAsDataURL(blob) 读取为DataURL字符串,好像是图像欸
5.abort（）中断读取
</pre>
</h2>
<!-- 接口事件-->
<h2><pre>
1.loadstart开始
2.progress正在读取
3.load成功完成数据读取
4.abort中断
5.error错误
6.loadend结束读取，可能成功可能失败
</pre>
</h2>
<!-- 接口方法实例-->
<form action="" method="post">
<input type="file" multiple id="MyFiles"/>
<input type="button" value="读取为二进制字符串" onclick="ReadAs('BinaryString')"/>
<input type="button" value="读取为数组缓冲" onclick="ReadAs('ArrayBuffer')"/>
<input type="button" value="读取为文本" onclick="ReadAs('Text')"/>
<input type="button" value="读取为图像" onclick="ReadAs('DataURL')"/>
<div id="message"></div>
</form>
<script type="text/javascript">
function ReadAs(action){
var blob=document.getElementById("MyFiles").files[0];
if(blob){
var reader=new FileReader();
switch(action.toLowerCase()){
case "binarystring":
reader.readAsBinaryString(blob);
break;
case "text":
reader.readAsText(blob);
break;
case "dataurl":
reader.readAsDataURL(blob);
break;
case "arraybuffer":
reader.readAsArrayBuffer(blob);
break;
}
}
reader.onload=function(e){
var result=this.result;
if(/image\/\w+/.test(blob.type)&&action.toLowerCase()=="dataurl"){
document.getElementById("message").innerHTML="<img src'"+result+"'/>"
}else{
document.getElementById("message").innerHTML=result;
}
}
}
</script>
<!-- 接口事件实例-->
<form action="" method="post">
<input type="file" multiple id="My">
<input type="button" value="读取文件" onclick="FileReaderEvent()">
<div id="me"><br/><br/><br/><br/></div>
</form>
<script type="text/javascript">
function FileReaderEvent(){
var blob=document.getElementById("My").files[0];
var message=document.getElementById("me");
var reader=new FileReader();
reader.onload=function(e){
message.innerHTML+="Event:load;<br/>";
}
reader.onloadstart=function(e){
message.innerHTML+="Event:loadstart;<br/>";
}
reader.onloadend=function(e){
message.innerHTML+="Event:loadend;<br/>";
}
reader.onerror=function(e){
message.innerHTML+="Event:error;<br/>";
}
reader.onabort=function(e){
message.innerHTML+="Event:loadabort;<br/>";
}
reader.onprogress=function(e){
message.innerHTML+="Event:progress;<br/>";
}
reader.onload=function(e){
message.innerHTML+="Event:load;<br/>";
}
reader.readAsDataURL(blob);
}
</script>
<!-- 例子：把图片拖进浏览器-->
<div>
把图片拖进下面的方框
</div>
<div id="droTarget"><br><br><br><br><br><br><br><br><br><br><br></div>
<script type="text/javascript">
var target;
function dropHandle(e){
var fileList=e.getDataTransfer.files;
var fileType;
for(var i=0;i<fileList.length;i++){
/*fileType=fileList[i].type;
if(fileType.indexOf('image')==-1){
alert('请拖拽图片')；
return；
}*/
loadImg(fileList[i]);
}
}
function loadImg(file){
var reader=new FileReader();
reader.onload=function(e){
var oImg=document.createElement('imbjkbg');
oImg.src=this.result;
target.appendChild(oImg);
}
reader.readAsDataURL(file);
}
window.onload=function(){
target=document.getElementById("droTarget");
target.addEventListener('dragover',function(e){
e.preventDefault();
},false);
target.addEventListener('drag',dropHandle,false);
}
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
