html5的网址分析器—感受什么是html5（好玩）

时间：2014-12-09

今天无聊，就写了一个网址分析器，其实很简单，就是把一些网站输进去，他会匹配你的输入内容，然后根据不同的类型，输出不同的结果！~ 直接看代码：

—————————————————————————————————

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5读取文件的内容</title>
<meta charset=”UTF-8″>
<script>
function show(){
var content=$(“content”);
var show=$(“show”);
var type=show.value.substr(show.value.length-3,3);
if(type==”png”||type==”jpg”||type==”gif”){
content.innerHTML=”<img src=’”+show.value+”‘ width=’320′ height=’240′/>”;
return false;
}
if(type==”mp3″){
content.innerHTML=”<audio id=’play’ controls=’controls’> <source src=’”+show.value+”‘ type=’audio/mpeg’> 三稳友情提示，你的浏览器不支持html5的audio标签. . </audio>”;
$(“play”).play();
}
if(type==”mp4″){
content.innerHTML=”<video id=’play’ width=’320′ height=’240′ controls=’controls’><source src=’”+show.value+”‘ type=’video/mp4′>三稳友情提示，你的浏览器不支持html5的video标签. </video>”;
$(“play”).play();
}

}

function putin(a){
$(“show”).value=a.title;
$(“button”).onclick();
$(“play”).play();
}

function $(id){
return document.getElementById(id);
}
</script>
</head>

<body id=”body” style=”background-color:#ffffff;color:red;”>
<center>
<h1>网络地址分析器–赶快复制地址试试吧</h1>
输入您的网站：<input type=”text” id=”show” size=”60″ value=”"/>
<input type=”button” id=”button” onclick=”show();” value=”分析”/><br/>
<br/>
如果不想伤眼，请关灯：<input id=”change” type=”button” onclick=”change();” value=”关灯”><br/>
读取的内容：<span id=”content”></span><br/>
一些测试的东西：
<p title=”http://gagahtml.sinaapp.com/uploads/video/naxienian.mp3” onclick=”putin(this);” style=”text-decoration: underline;color:green”>[音乐]好听那些年</p>
<p title=”http://gagahtml.sinaapp.com/uploads/video/test.mp4” onclick=”putin(this);” style=”text-decoration: underline;color:green”>[视频]可爱的女生</p>
<p title=”http://www.css3-html5.com/uploadfile/2012/0528/20120528011447347.jpg” onclick=”putin(this);” style=”text-decoration: underline;color:green”>[图片]好看的纸张</p>

<h2><a href=”http://www.yugaga.com”><font color=”green”>永远记住我们哦–娱嘎嘎（三稳制作）</font><h2>
<center>
</body>
</html>

—————————————————————————————————–

效果截图：

演示地址：http://gagahtml-wordpress.stor.sinaapp.com/uploads/2012/05/wangzhifenxi.html

上一篇：html5高手是怎么炼成的–其实只需要三步 下一篇：什么是CSS3?

html5的网址分析器—感受什么是html5（好玩）

相关文章

最新文章