js进化史

最新推荐文章于 2023-09-08 09:00:00 发布

qq469236803

最新推荐文章于 2023-09-08 09:00:00 发布

阅读量1.3k

点赞数

分类专栏： web前端 html js 原创

本文链接：https://blog.csdn.net/toolazytoname/article/details/14001959

版权

原创同时被 2 个专栏收录

65 篇文章 0 订阅

订阅专栏

web前端 html js

34 篇文章 0 订阅

订阅专栏

<html>

<head>

<title>Thread</title>

.post {text-align:left;padding:5px;background-color:white}

.detail {text-align:left;padding:5px;margin:5px;background-color:gray}

.info{text-align:left;padding:5px;background-color:#333333}

.avatar {border:dashed;border-width:1;color:#0066CC}

.title{text-align:left;color:black;}

.subtitle {margin:5px;text-align:left;color:#333333}

.small{text-align:left;padding:5px;}

.hr0{ height:1px;border:none;border-top:1pxdashed#0066CC;}

.hr1{ height:1px;border:none;border-top:1pxsolid#555555;}

.hr2{ height:3px;border:none;border-top:3pxdoublered;}

.hr3{ height:5px;border:none;border-top:5pxridgegreen;}

.hr4{ height:10px;border:none;border-top:10pxgrooveskyblue;}

.actionleft{float:left}

.actionright{float:right}

img{height:320px;height =auto}

</style>

</script>

function loadXMLDoc() {

var xmlhttp;

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {

// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState ==4 && xmlhttp.status ==200) {

alert(xmlhttp.responseText);

document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

}

xmlhttp.open("GET","http://platform.sina.com.cn/news/news?app_key=2923419926&url=http://video.sina.com.cn/p/sports/j/v/2013-10-31/092963087045.html&format=json&reservedtag=HDSlide&fields=title,content,related_news,comment,video,images,short_title,weibo,pages,createdatetime,media",true);

xmlhttp.send();

}

function load(returnValue)

{

alert("test");

alert(returnValue);

//set the image size

//set container content

var content = (returnValue.result.data)[0].content;

var postCon = document.getElementsByClassName("container")[0]

postCon.innerHTML = content;

var clientWidth=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度

var images = document.getElementsByTagName('img');

for(var i=0;i<images.length;i++)

{

images[i].style.width = clientWidth;

images[i].style.height = 'auto';

}

//change the url value

var archers = document.getElementsByTagName('a');

for(var i=0;i<archers.length;i++)

{

archers[i].href = 'http://www.baidu.com';

}

//if video add video div

//alert(content);

var video = (returnValue.result.data)[0].video;

if(video)

{

var archerContent ='archerContent';

var archerContentUrl = video.android_url;

var thumb = video.thumb;

var videoHtml ='<div> <a href="'+archerContentUrl +'" name="tj_more">'+archerContent +'</a> <div>';

var videoHtml ='<div id="p_player" style="position : relative;"><video id="video" controls="controls" preload="auto" x-webkit-airplay="true" style="width: 300px; height: 140px;" class="playing" poster="'+thumb+'"><source id="video-hlv" src="'+archerContentUrl +'" type="video/mp4"></video></div>';

postCon.innerHTML +=videoHtml;

}

</script>

</head>

</body>

</html>

在w3c school 的帮助下，做的差不多了。记性真差啊我。

<html><head>
<title>Thread</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width = device-width">
<meta name="viewport" content="initial-scale = 1.0">
<meta name="viewport" content="user-scalable = no">
<style type="text/css">
.post {text-align:left; padding: 5px; background-color: white}
.detail {text-align:left; padding: 5px; margin: 5px; background-color: gray}
.info{text-align:left; padding: 5px; background-color:#333333}
.avatar {border:dashed; border-width:1;color:#0066CC}
.title{text-align:left; color:black;}
.subtitle {margin: 5px; text-align:left; color:#333333}
.small{text-align:left; padding: 5px;}
.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}
.hr1{ height:1px;border:none;border-top:1px solid #555555;}
.hr2{ height:3px;border:none;border-top:3px double red;}
.hr3{ height:5px;border:none;border-top:5px ridge green;}
.hr4{ height:10px;border:none;border-top:10px groove skyblue;}
.actionleft{float:left}
.actionright{float:right}
img{height:320px;height = auto}
body
{
background-color:#F5F5F5;
}
#title
{
text-align:left;
color:black;
font-size:20px;
font-weight:bolder;
}
#createdatetime
{
text-align:left;
color:gray;
font-size:13px;
position:relative;
left:0px;
top:0px;
}
#media
{
text-align:left;
color:gray;
font-size:10px;
position:float;
left:0px;
top:0px;
}
</style>

<script type="text/javascript">
var returnValue = {"result":{"status":{"msg":"","code":0},"data":[{"id":"568f6809dccf71688b5671cc1cb6ff59b5c2ed0c914a94bb967a056cf0d730f0","short_title":"加索尔16+13制胜盖帽湖人胜","media":"新浪体育","weibo":"yes","title":"加索尔16+13送制胜盖帽湖人拒21分逆转险胜老鹰","type":"content","reservedtag":{"HDSlide":[]},"url":"http://sports.sina.com.cn/nba/2013-11-04/12596868068.shtml","content-type":"text","images":[{"title":"加索尔16+13送制胜盖帽湖人拒21分逆转险胜老鹰","width":230,"url":"http://i0.sinaimg.cn/ty/nba/2013-11-04/U4933P6T12D6868068F1286DT20131104143359.jpg","height":300}],"pages":{},"createdatetime":"Mon, 04 Nov 2013 12:59:06 +0800","channel-id":"6","video":{"thumb":"","ipad":"","vid":0,"android_url":"","length":"","normal":"","url":""},"related_news":[],"content":"<p>　　北京时间11月4日，湖人<a class=\"wt_article_link\" οnmοuseοver=\"WeiboCard.show(1990443391, 'sports' , this)\" href=\"http://weibo.com/u/1990443391?zw=sports\" target=\"_blank\">[微博]</a>在一度领先21分的情况下几乎被翻盘，最终主场以105-103险胜老鹰。</p>\n\n<p>　　湖人(2-2)避免三连败。保罗-加索尔拿下了16分13个篮板，最后6秒罚中关键两次罚球，并盖掉了老鹰试图追平比分的投篮。史蒂夫-纳什<a class=\"wt_article_link\" οnmοuseοver=\"WeiboCard.show(1661987395, 'sports' , this)\" href=\"http://weibo.com/u/1661987395?zw=sports\" target=\"_blank\">[微博]</a>13分6次助攻，“科比<a class=\"wt_article_link\" οnmοuseοver=\"WeiboCard.show(3264072325, 'sports' , this)\" href=\"http://weibo.com/u/3264072325?zw=sports\" target=\"_blank\">[微博]</a>替身”泽维尔-亨利18分。尼克-杨替补出场，也贡献13分。</p>\n\n<p>　　老鹰(1-2)几乎翻盘。凯尔-科沃尔<a class=\"wt_article_link\" οnmοuseοver=\"WeiboCard.show(1863047912, 'sports' , this)\" href=\"http://weibo.com/u/1863047912?zw=sports\" target=\"_blank\">[微博]</a>三分球6投6中，拿下了22分，艾尔-霍福德<a class=\"wt_article_link\" οnmοuseοver=\"WeiboCard.show(3210920343, 'sports' , this)\" href=\"http://weibo.com/u/3210920343?zw=sports\" target=\"_blank\">[微博]</a>12分16个篮板，杰夫-蒂格14分6个篮板，保罗-米尔萨普14分7个篮板。</p>\n\n<p>　　首战爆冷击败快船<a class=\"wt_article_link\" οnmοuseοver=\"WeiboCard.show(1990560631, 'sports' , this)\" href=\"http://weibo.com/u/1990560631?zw=sports\" target=\"_blank\">[微博]</a>之后，湖人此后连输两场。今天面对老鹰，湖人有获胜的信心，因为过去8次在这里交手，全都是湖人胜出，过去24次在洛杉矶交锋，老鹰只胜出3次。</p>\n\n<p>　　虽然湖人仍然缺少科比-布莱恩特，但仍打得非常顺利。被称为“科比替身”的亨利开场后不久两投命中，包办了湖人前5分。湖人众将手感都不错，已经出现在交易传言中的纳什在本节中段投中三分，而本节还有6分17秒时，加索尔外线接后无人防守，果断出手，也命中三分，湖人以17-10取得领先。尼克-杨和布雷克此后也相继远投命中，湖人多点开花，令老鹰防不胜防。卡曼在本节还有5.9秒时中投得手，湖人以33-22取得两位数的优势。</p>\n\n<p>　　湖人打得顺风顺水。尼克-杨第二节连连命中，本节还有8分55秒时，他突破到篮下后竟然分球，这对喜欢单打的尼克-杨来说实属罕见。希尔接球后反手上篮得分，湖人以46-25取得21分的优势，但此后3分钟只投中一球，老鹰将比分追成36-49。湖人重拾状态，本节还有4分19秒时，纳什运球到篮下，在对方紧逼之下，他腾不出左手，右手单手将球撩起，竟然打板命中，湖人又以55-38拉开差距。半场结束时，湖人以62-49领先。</p>\n\n<p>　　上半场湖人助攻达到18次。加索尔得了9分11个篮板，亨利和尼克-杨也有9分进账。霍福德为老鹰拿下了10分10个篮板，替补出场的斯科特11分。</p>\n\n<p>　　湖人变成当年纳什率领的太阳，开始跑轰。第三节打了近1分钟后，加索尔虚晃一枪，突然带球突到内线，以一记单手暴扣结束，湖人以66-49领先。老鹰外线有所回升，几度三分命中后将差距缩小，本节过半时，他们将比分追成了65-72。亨利还以一记三分，卡曼连续跳投得手，湖人打出一波12-2的攻击后，又以84-67拉开差距。本节最后3分钟湖人只投中一球，但前三节仍以88-76占优势。</p>\n\n<p>　　上半场湖人投中8记三分，但下半场在三分线外失去感觉。老鹰最后一节大举反击，比赛还有3分48秒时，蒂格突破挑篮命中，老鹰只以96-98落后。亨利强打造成犯规，两罚两中，加索尔也罚中一球后，湖人在比赛进入最后2分钟时以101-96领先。</p>\n\n<p>　　科沃尔在本节还有1分16秒时又三分命中，纳什此后投篮不中，米尔萨普中投得手后，在比赛还有35.3秒时，老鹰将比分扳成了103-103。</p>\n\n<p>　　加索尔关键一投不中，但乔丹抢下价值千金的篮板，加索尔再次攻到篮下造成犯规，两罚两中后，湖人以105-103超出，留给老鹰6秒。</p>\n\n<p>　　此前三分球6投6中的科沃尔自然成为最后一攻的人选，可惜这一次他遭到了加索尔盖帽。霍福德抢下进攻篮板后，遭到米克斯抢断，比赛就此结束。(吴哥)</p>","comment":{"total_count":5263,"qreply_count":4525,"show_count":618,"comment":"yes","commentid":"ty:6-12-6868068"}}],"encoding":"utf-8","language":"cn"}};
function load()
{
//set the image size
//set container content
var content = (returnValue.result.data)[0].content;
var postCon = document.getElementsByClassName("container")[0];
postCon.innerHTML = content;


//set maintitle
var titleElement = document.getElementById("title");
var title = (returnValue.result.data)[0].title;
titleElement.innerHTML = title;

//set createdatetime
var createdatetimeElement = document.getElementById("createdatetime");
var createdatetime = new Date((returnValue.result.data)[0].createdatetime);
var curr_date = createdatetime.getDate();
var curr_month = createdatetime.getMonth() + 1; //Months are zero based
var curr_year = createdatetime.getFullYear();
var curr_hour = createdatetime.getHours();
var curr_min = createdatetime.getMinutes();
var createdatetimeString = curr_year+'-'+curr_month+'-'+curr_date+' '+curr_hour+':'+curr_min;
createdatetimeElement.innerHTML = createdatetimeString;

//set from
var mediaElement = document.getElementById("media");
var media = (returnValue.result.data)[0].media;
mediaElement.innerHTML = '来源: '+media;
// createdatetimeElement.innerHTML +='               来源: '+media;



//set headImage
var headImageElement = document.getElementById("headImage");
var headImages = (returnValue.result.data)[0].images;
for(var i=0;i<headImages.length;i++)
{

var imageElementTitle = headImages[i].title;
var imageElementWidth = headImages[i].width;
var imageElementUrl = headImages[i].url;
var imageElementHeight = headImages[i].height;
var headImagesHtml = '<img src="'+ imageElementUrl +'" width="'+ imageElementWidth +'" height="'+imageElementHeight +' " alt="'+imageElementTitle +'">';

var IsHDAtlas = new Boolean(1);
if(IsHDAtlas)
{
var HDAtlasUrl='http://www.baidu.com';
headImagesHtml = '<a href = "'+HDAtlasUrl+'"> <img src="'+ imageElementUrl +'" width="'+ imageElementWidth +'" height="'+imageElementHeight +' " alt="'+imageElementTitle +'"> </a>';
}

headImageElement.innerHTML += headImagesHtml;

}


var clientWidth=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度
var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++)
{
images[i].style.width = clientWidth;
images[i].style.height = 'auto';
}

//change the url value
var archers = document.getElementsByTagName('a');
for(var i= 0;i<archers.length;i++)
{
archers[i].href = 'http://www.baidu.com';
}
//if video add video div
//alert(content);
var video = (returnValue.result.data)[0].video;
if(video.android_url.length > 0)
{
var archerContent = 'archerContent';
var archerContentUrl = video.android_url;
var thumb = video.thumb;
var videoHtml = '<div> <a href="'+archerContentUrl +'" name="tj_more">'+archerContent +'</a> <div>';


var videoHtml = '<div id="p_player" style="position : relative;"><video id="video" controls="controls" preload="auto" x-webkit-airplay="true" style="width: 300px; height: 140px;" class="playing" poster="'+thumb+'"><source id="video-hlv" src="'+archerContentUrl +'" type="video/mp4"></video></div>';




postCon.innerHTML +=videoHtml;

}
sendToApp('layoutfinished', 'a')

}
var sendToApp = function(_key, _val) {
var iframe = document.createElement("IFRAME");
iframe.setAttribute("src", _key + ":##sendToApp##" + _val);
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
};

</script>
</head>
<body οnlοad="load()">

<div id="title">加索尔16+13送制胜盖帽湖人拒21分逆转险胜老鹰</div>
<div id="createdatetime">2013-11-4 12:59</div>
<div id="media">来源: 新浪体育</div>
<div id="headImage"><a href="http://www.baidu.com"> <img src="http://i0.sinaimg.cn/ty/nba/2013-11-04/U4933P6T12D6868068F1286DT20131104143359.jpg" width="230" height="300 " alt="加索尔16+13送制胜盖帽湖人拒21分逆转险胜老鹰" style="width: 320px; height: auto; "> </a></div>
<div class="container"></div>

</body>

</html>

面向对象

<html>

<head>

<title>Article</title>

body

{

background-color:#F5F5F5;

}

#title

{

text-align:left;

color:black;

font-size:20px;

font-weight:bolder;

}

#createdatetime

{

text-align:left;

color:gray;

font-size:13px;

float:left;

margin-bottom:16px;

}

#media

{

text-align:left;

color:gray;

font-size:13px;

float:left;

position:relative;

left:25;

margin-bottom:16px;

}

#article

{

clear:both;

}

</style>

var kSPWebActionPlayVideo = "playvideo";

var kSPWebActionShowAlbum = "showalbum";

var kSPWebActionShowImage = "showimage";

var kSPWebActionCustom = "custom";

var kSPWebActionReady = "ready";

var kSPWebActionLayoutFinished = "layoutfinished";

</script>

function onloadActionReady()

{

sendToApp(kSPWebActionReady, 'def');

}

function resizeImage()

{

//set the image size

var clientWidth=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度

var images = document.getElementsByTagName('img');

for(var i=0;i<images.length;i++)

{

images[i].style.width = clientWidth-20;

images[i].style.height = 'auto';

}

function changeArcherUrlValue()

{

//change the url value

var archers = document.getElementsByTagName('a');

for(var i= 0;i<archers.length;i++)

{

archers[i].href = 'http://www.baidu.com';

}

function setPageContent()

{

resizeImage();

changeArcherUrlValue();

}

function toVideo()

{

var positionString =getPosttion("video");

sendToApp(kSPWebActionPlayVideo,positionString);

}

function getPosttion(id)

{

var offsets = document.getElementById(id).getBoundingClientRect();

var top = offsets.top;

var left = offsets.left;

var width = document.getElementById(id).clientWidth;

var height = document.getElementById(id).clientHeight;

var positionString = "left:"+left+"top:"+top+"width:"+width+"height:"+height;

var positionString = ""+left+":"+top+":"+width+":"+height;

return positionString;

}

var sendToApp = function(_key, _val) {

var iframe = document.createElement("IFRAME");

iframe.setAttribute("src", _key + ":##sendToApp##" + _val);

document.documentElement.appendChild(iframe);

iframe.parentNode.removeChild(iframe);

iframe = null;

}

</script>

function article(returnValue)

{

this.returnValue = returnValue;

this.title = "s";

this.createdatetimeString = "";

this.media = "";

this.videoHtml = "";

this.htmlResult = "";

this.content = "";

this.parse = function()

{

this.getTitle();

this.getCreatedatetime();

this.getMedia();

this.getVideo();

this.getHeadImage();

this.getArticle();

}

this.getTitle = function()

{

this.title = (this.returnValue.result.data)[0].title;

}

this.getCreatedatetime = function()

{

var createdatetime = new Date((returnValue.result.data)[0].createdatetime);

var curr_date = createdatetime.getDate();

var curr_month = createdatetime.getMonth() + 1; //Months are zero based

var curr_year = createdatetime.getFullYear();

var curr_hour = createdatetime.getHours();

if (curr_hour<10)

{

curr_hour = "0"+curr_hour;

}

var curr_min = createdatetime.getMinutes();

if(curr_min<10)

{

curr_min = "0" + curr_min;

}

this.createdatetimeString = curr_year+'-'+curr_month+'-'+curr_date+' '+curr_hour+':'+curr_min;

}

this.getMedia = function()

{

this.media = "来源: "+(returnValue.result.data)[0].media;

}

this.getVideo = function()

{

//if video add video div

var video = (returnValue.result.data)[0].video;

if(video.android_url.length > 0)

{

var archerContent = 'archerContent';

var archerContentUrl = video.android_url;

var thumb = video.thumb;

var positionString = getPosttion("video");

// this.videoHtml = '<img style="width:300;height:100" src="'+ thumb +'" alt="'+archerContent +'">';

// this.videoHtml += '<button type="button" onclick ="toVideo()">Click Me!</button>';

this.videoHtml = '<div id="p_player" style="position : relative;"><video id="video" controls="controls" preload="auto" x-webkit-airplay="true" style="width: 300px; height: 140px;" class="playing" poster="'+thumb+'"><source id="video-hlv" src="'+archerContentUrl +'" type="video/mp4"></video></div>';

}

this.getHeadImage = function()

{

var headImages = (returnValue.result.data)[0].images;

for(var i=0;i<headImages.length;i++)

{

var imageElementTitle = headImages[i].title;

var imageElementWidth = headImages[i].width;

var imageElementUrl = headImages[i].url;

var imageElementHeight = headImages[i].height;

var headImagesHtml = '<img src="'+ imageElementUrl +'" alt="'+imageElementTitle +'">';

var IsHDAtlas = new Boolean(1);