h5粗略了解(含页面拖拽)

来源：互联网发布：心蓝软件手机编辑：程序博客网时间：2024/06/06 10:43

<!DOCTYPE html>
<html>
<head>
<meta charset = 'UTF-8'>
<title>h5练习,含h5拖拽/拖放</title>

</head>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<h1>h1标题</h1>
<article>文章文章文章文章</article>
<section>文档中的节,section</section>3
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
<canvas id='cvs' width="300" height="300" style='border:1px solid #333'></canvas>
canvas是一个图像的容器，h5才有的新元素，元素本身只可定义画布（底部背景）大小，要绘制图像必须
通过js，第一步通常都是调用getContext("2d")方法创建context对象，使用这个对象来绘制各种对象
<script>
var c = document.getElementById('cvs');
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
ctx.moveTo(150,75);
ctx.lineTo(200,75);
ctx.stroke();
ctx.beginPath();
ctx.arc(150,150,50,0,Math.PI);
ctx.stroke();
</script>
svg专门用于绘制矢量图形，不受分辨率影响，更详细的用法自己可以百度，有很多
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" border='1px'>
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="130px" width="500px">
   <defs>
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop></stop></linearGradient>
   </defs>
   <ellipse cx="300" cy="70" rx="85" ry="55" fill="url(#grad1)"><text fill="#ffffff" font-size="45" font-family="Verdana" x="250" y="86">SVG</text>
   Sorry, your browser does not support inline SVG.
</ellipse></svg>
<h1>html5新功能之拖放/拖拽</h1>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData('Text',ev.target.id)
}

function drop(ev){
var id = ev.dataTransfer.getData('Text');
ev.target.appendChild(document.getElementById(id));
}
</script>
<div style="border: 1px solid;height: 200px;width: 200px" ondragover="allowDrop(event);" ondrop='drop(event)'>区域１</div>
<image id='drag1' src='../bb.jpg' draggable="true" ondragstart="drag(event)"></image>
<div style="border: 1px solid;height: 200px;width: 200px" ondragover="allowDrop(event);" ondrop='drop(event)'>区域２</div>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
   if (navigator.geolocation)
   {
       navigator.geolocation.getCurrentPosition(showPosition,showError);
   }
   else
   {
       x.innerHTML="该浏览器不支持定位。";
   }
}
function showPosition(position)
{
   x.innerHTML="纬度: " + position.coords.latitude +
   "<br>经度: " + position.coords.longitude;
}
function showError(error)
{
   switch(error.code)
   {
       case error.PERMISSION_DENIED:
           x.innerHTML="用户拒绝对获取地理位置的请求。"
           break;
       case error.POSITION_UNAVAILABLE:
           x.innerHTML="位置信息是不可用的。"
           break;
       case error.TIMEOUT:
           x.innerHTML="请求用户地理位置超时。"
           break;
       case error.UNKNOWN_ERROR:
           x.innerHTML="未知错误。"
           break;
   }
}
</script>
<h1>h5之获取地理位置</h1>
h5中通过navigator.geolocation.getCurrentPosition方法获得当前用户的位置
可以传递两个参数，分别是两个函数，getCurrentPosition会给第一个函数传递一个coordinates对象
给第二个函数传递error对象，用于当发生错误时调用
coordinates.latitude获取纬度,coordinates.longitude获取经度
<h1>h5之插件</h1>
有object video audio embed 等元素可以引入插件，了解一下即可
<h1>h5之表单,step规定输入的数字必须是step的倍数
<form>
<label for='inp1'>表单</label>
限制必填数值大小步数类型的数值框<input id='inp1' type = 'number' max=100 min =0 step =2 required=true size=1>
限制格式的文本框<input type='text' pattern='2'>
滚动条<input type='range'>
<input type='submit'>
只能输入电话的文本框(直接用type不需要人工指定正则)
<input type='tel'>
<big>三个用于输入时间的表单输入框</big>
<br>
<input type='month'>
<br>
<input type='week'>
<br>
<input type='time'>
<br><br><br><br><br><br><br><br><br>
</form>
</body>
</html>

阅读全文

0 0