日期和天气交替显示

最新推荐文章于 2024-03-04 10:49:07 发布

dujun270235862dujun

最新推荐文章于 2024-03-04 10:49:07 发布

阅读量449

点赞数

分类专栏： html+css+javascript 文章标签： function stylesheet javascript border table timer

本文链接：https://blog.csdn.net/dujun270235862dujun/article/details/5486006

版权

html+css+javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head runat="server">
<title>timeAndweather</title>
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="javaScript/jquery-1.2.6-cn-vsdoc.js" type="text/javascript"></script>
<script src="javaScript/jquery-1.2.6-cn.js" type="text/javascript"></script>
<script src="javaScript/realtime.js" type="text/javascript"></script>
<base target="_self" />
<script language="JavaScript" type="text/javascript">

$(function(){
setTimeout("WeatherShow()",3000);
});
function WeatherShow()
{
$("#time").fadeOut(1000,
function (){
$("#weather").show(2000,function() {setTimeout("TimeShow()",3000);});
}
);
}
function TimeShow()
{
$("#weather").hide(1000,//执行完函数后执行里面的方法
function (){
$("#time").fadeIn(2000,function() {setTimeout("WeatherShow()",3000);});//使用计时器让函数调用，推迟2秒
}
);

}
</script>

</head>
<body>
<form id="form1" runat="server">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.jpg" width="1000" height="210" alt="" />
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="td">
<tr>
<td width="190" class="fon" valign="middle" align="center">
<table align="center">
<tr>
<td>
<div id="time">

<script language="javascript">timer_begin(1);aaaa</script>

</div>
</td>
<td>
<div id="weather" style="display: none;">
<iframe src=" http://m.weather.com.cn/m/pn6/weather.htm?id=101101001T " width="130"
height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"
allowtransparency="true" scrolling="no"></iframe>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>

realtime.js文件

function realTime(index) {
var d = new Date();
var dayDes = new Array("天", "一", "二", "三", "四", "五", "六");
var t = document.all("timerbar_" + index);
if (t) {
t.innerHTML = d.getFullYear() + "年" + (((d.getMonth() + 1) + "").length == 2 ? (d.getMonth() + 1) : "0" + (d.getMonth() + 1)) + "月" + ((d.getDate() + "").length == 2 ? d.getDate() : "0" + d.getDate()) + "日星期" + dayDes[d.getDay()];
}
setTimeout("realTime(" + index + ");", 1000);
}

function timer_begin(index) {
document.write("<span id='timerbar_" + index + "' align='center' style='font-size:12px;color:#fff;'></span>");
realTime(index);
}

style.css文件

body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #eeeeee;
}
.fon
{
font-family: "宋体";
font-size: 12px;
color: #ffffff;
}
.td
{
background: url(../images/index_03.gif) repeat-x;
height: 35px;
}
A img /*图片无边框*/
{
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}