HTML5

论坛 › 期权论坛 › 期权     
盒子Craft   2019-6-16 23:12   2868   0
HTML5音频
1、Audio(音频)
HTML5提供了播放音频文件的标准
2、control(控制器)
control属性供添加播放、暂停和音量控件
3、标签
定义声音
规定多媒体资源，可以是多个
示例：
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     音频
复制代码
  1. [/code][code]
复制代码
  1.     浏览器不支持
复制代码
  1. [/code][code]
复制代码



HTML5视频
1.Video(视频)
HTML5提供了展示视频的标准
2.control(控制器)
control属性供添加播放、暂停和音量控件
3、标签：
    定义声音
    规定多媒体资源，可以是多个
4、属性：
width：宽
height：高
示例：
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     视频
复制代码
  1. [/code][code]
复制代码
  1.     浏览器不支持
复制代码
  1. [/code][code]
复制代码



HTML5拖放
拖放:
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
浏览器支持：
Inyernet Explorer9、Firefox、Opera12、Chrome以及Safari5支持拖放

设置元素为可拖放：
draggable="ture"
拖动什么：
ondragstart和setData()
放到何处
ondragover
进行放置：
ondrop
示例：
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     拖放
复制代码
  1.    
复制代码
  1.         #div1{
复制代码
  1.             width: 600px;
复制代码
  1.             height:600px;
复制代码
  1.             border: 1px solid #aaabbb;
复制代码
  1.         }
复制代码
  1. [/code][code]   
复制代码
  1.         function allowDrop(ev) {
复制代码
  1.             ev.preventDefault();
复制代码
  1.         }
复制代码
  1.         //放置
复制代码
  1.         function drag(ev) {
复制代码
  1.             ev.dataTransfer.setData("Text",ev.target.id);
复制代码
  1.         }
复制代码
  1.         //拖动
复制代码
  1.         function drop(ev) {
复制代码
  1.             ev.preventDefault();
复制代码
  1.             var data = ev.dataTransfer.getData("Text");
复制代码
  1.             ev.target.appendChild(document.getElementById(data));
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]    请拖动图片
复制代码
  1.    
复制代码
  1.    
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码



HTML5画布
画布：
画布是一个矩形区域，您可以控制其每一个像素
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
示例：
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     画布
复制代码
  1. [/code][code]
复制代码
  1.    
复制代码
  1. [/code][code]    var c = document.getElementById("canvas");
复制代码
  1.     var cxt = c.getContext("2d");
复制代码
  1.     cxt.fillStyle = "#ff0000";
复制代码
  1.     //图片
复制代码
  1.     /*var img = new Image();
复制代码
  1.     img.onload = function(){
复制代码
  1.         cxt.drawImage(img,0,0);
复制代码
  1.     }
复制代码
  1.     img.src = "images/1.png";
复制代码
  1.     */
复制代码
  1.     //方形
复制代码
  1.     //cxt.fillRect(0,0,100,100);
复制代码
  1.     //圆形
复制代码
  1.     cxt.beginPath();
复制代码
  1.     cxt.arc(70,60,30,0,Math.PI*2,true);
复制代码
  1.     cxt.closePath();
复制代码
  1.     cxt.fill();
复制代码
  1. [/code][code]
复制代码
  1. [/code][img]https://201903.oss-cn-hangzhou.aliyuncs.com/wc/1811847-cd6f6b4e842974df9cf2386ae5abd6b3[/img]
  4. [b]HTML5 SVG[/b]
  5. 什么是SVG?
  6. SVG指可伸缩矢量图形（Scalable Vector Graphics）
  7. SVG用于定义用于网络的基于矢量的图形
  8. SVG使用XML格式定义图形
  9. SVG图形在放大或改变尺寸的情况下其图形质量不会有损失
  10. SVG是万维网联盟的标准
  11. SVG的优势
  12. 与其他图形格式相比（比如JPEG和GIF），使用SVG的优势在于：
  13. SVG图像可通过文本编译器来创建和修改
  14. SVG图像可被搜索、索引、脚本化或压缩
  15. SVG是可伸缩的
  16. SVG图像可在任何的分辨率被高质量地打印
  17. SVG可在图像质量不下降的情况下被放大
  18. 浏览器支持
  19. Internet Explorer 9、Firefox、Opera、 Chrome以及 Safari支持内联SVG。
  20. SVG使用:
  21. https://developer.mozilla.org/zh-CN/
  22. 示例：
  23. [list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]
复制代码
  1. [/code][code]
复制代码
  1.    
复制代码
  1.     SVG
复制代码
  1. [/code][code]
复制代码
  1.    
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]   
复制代码
  1. [/code][code]
复制代码
外部引用文件svg.svg
  1. [/code][code]
复制代码
  1.    
复制代码
  1. [/code][img]https://201903.oss-cn-hangzhou.aliyuncs.com/wc/1811847-df1abfea1e7bb65812ee56467e081e8c[/img]
  4. [b]HTML5地理定位[/b]
  5. 地理定位：
  6. HTML5 Geolocation API用于获得用户的地理位置
  7. 浏览器支持：
  8. Inter Explorer 9、Firefox、Chrome、Safari以及Opera支持地定位
  9. 注释：对于拥有GPS的设备，比如iphone，地理定位更加精确。
  10. 示例：
  11. [list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]
复制代码
  1. [/code][code]
复制代码
  1.    
复制代码
  1.     地理位置
复制代码
  1.    
复制代码
  1.    
复制代码
  1.         //获取当前地理位置
复制代码
  1.         function init() {
复制代码
  1.             navigator.geolocation.getCurrentPosition(function (position) {
复制代码
  1.                 var coords = position.coords;
复制代码
  1.                 //设定地图参数，将用户的当前地理的经纬度设为地图中心点
复制代码
  1.                 var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
复制代码
  1.                 var myOptions = {
复制代码
  1.                     zoom:14,
复制代码
  1.                     center:latlng,
复制代码
  1.                     mapTypeId:google.maps.MapTypeId.ROADMAP
复制代码
  1.                 };
复制代码
  1.                 //创建地图并“map”div中显示
复制代码
  1.                 var map1;
复制代码
  1.                 map1 = new google.maps.Map(document.getElementById("map"),myOptions);
复制代码
  1.                 //地图上创建标记
复制代码
  1.                 var marker = new google.maps.Maker({
复制代码
  1.                     position:latlng,
复制代码
  1.                     map:map1
复制代码
  1.                 });
复制代码
  1.                 //设定标准窗口，并指定该窗口的注释文字
复制代码
  1.                 var infowindow = new google.maps.InfoWindow({
复制代码
  1.                     content:"当前位置"
复制代码
  1.                 });
复制代码
  1.                 infowindow.open(map1,marker);
复制代码
  1.             })
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码



HTML5 Web存储
HTML5提供了两种在客户端存储的新方法：
localStorage:没有时间限制的数据存储
sessionStorage:针对一个session的数据存储
之前，这些都是有cookie完成的。但是cookie不适合大量数据的存储，
因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而效率也不高。

localStorage方法存储的数据没有时间限制，一年以后数据仍然可以使用
sessionStorage方法针对一个session进行数据存储，当用户关闭当前浏览器窗口，数据会被删除。
localStorage示例：
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     web存储
复制代码
  1.    
复制代码
  1.         var ta;
复制代码
  1.         var btn;
复制代码
  1.         window.onload = function(){
复制代码
  1.             ta = document.getElementById("ta");
复制代码
  1.             if(localStorage.text){
复制代码
  1.                 ta.value = localStorage.text;
复制代码
  1.             }
复制代码
  1.             btn = document.getElementById("btn");
复制代码
  1.             btn.onclick = function () {
复制代码
  1.                 //alert(ta.value);
复制代码
  1.                 localStorage.text = ta.value;
复制代码
  1.             }
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     save
复制代码
  1. [/code][code]
复制代码


sessionStorage示例：
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     web存储
复制代码
  1.    
复制代码
  1.         var num = 0;
复制代码
  1.         var txt;
复制代码
  1.         var btn;
复制代码
  1.         window.onload = function(){
复制代码
  1.             txt = document.getElementById("txt");
复制代码
  1.             btn = document.getElementById("addbtn");
复制代码
  1.             if(sessionStorage.num){
复制代码
  1.                 num = sessionStorage.num;
复制代码
  1.             }else{
复制代码
  1.                 num = 0;
复制代码
  1.             }
复制代码
  1.             btn.onclick = function () {
复制代码
  1.                 num++;
复制代码
  1.                 sessionStorage.num = num;
复制代码
  1.                 showNum();
复制代码
  1.             }
复制代码
  1.         }
复制代码
  1.         function showNum() {
复制代码
  1.             txt.innerHTML = num;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]    0
复制代码
  1.     add
复制代码
  1. [/code][code]
复制代码

回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1级新秀
盒子Craft

积分:
帖子:
精华:
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP