html5和css3学习历程

1.video,audio视频和音频的应用

<!doctype html>
<html>
<head></head>
<body>
  
  <hr />
  使用以下VIDEO标签的API<br />
  <video src="movie.webm" controls="controls" id="video" autoplay="autoplay">
   您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
  </video>
  <br />
  <button onClick="bofang()">播放</button>
  <button onClick="zanting()">暂停</button>
  <button onClick="kuaijin()">快进10秒</button>
  <button onClick="kuaitui()">快退10秒</button>
  <button onClick="shutup(this)">闭嘴</button>
  <button onClick="soso()">加速播放</button>
  <button onClick="yu()">减速播放</button>
  <button onClick="normal()">正常播放</button>
  <button onClick="upper()">提高嗓门</button>
  <button onClick="lower()">降低嗓门</button>
  <script>
   //获取对应的video标签
   var video=document.getElementById('video');
   //播放方法
   function bofang(){
    video.play();
   }
   //暂停方法
   function zanting(){
    video.pause();
   }
   //快进10秒
   function kuaijin(){
    video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
   }
   //快退10秒
   function kuaitui(){
    video.currentTime-=10;
   }
   //静音按钮
   function shutup(obj){
    if(video.muted){
     obj.innerHTML="闭嘴";
     video.muted=false;
    }else{
     obj.innerHTML="张嘴";
     video.muted=true;
    }
   }
   //加速播放(3倍速度)
   function soso(){
    video.playbackRate=3;
   }
   //慢速播放(慢三倍)

   function yu(){
    video.playbackRate=1/3;
   }
   //正常倍速
   function normal(){
    video.playbackRate=1;//默认的播放倍速是1
   }
   //调高声音
   function upper(){
    video.volume+=0.2;//声音值的范围是0-1
   }
   //调低声音
   function lower(){
    video.volume-=0.2;
   }
  </script>
  
  <video controls="controls" height="500" width="500" poster = "PLMM.jpg" loop="loop">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
  </video>
  <hr />
  音频标签的使用<br />
  <audio src="我的好兄弟.mp3" controls="controls">
   您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？
  </audio>
</body>
</html>

2.html5拖放

<!DOCTYPE HTML>

<html>

<head>

#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

</div>

</body>

</html>

3.什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

下面的例子是一个简单的 SVG矢量图圆文件的例子。SVG 文件必须使用 .svg 后缀来保存：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

</svg>

秒客网

html5和css3学习历程

3.什么是SVG？

相关文章