0

我不得不只使用 Javascript 创建一个“假”天气页面。我在布局上苦苦挣扎，有几个问题：

  • 我尝试了一切以在我的“h1”标题上方添加填充，但没有任何效果。

  • 我希望天气照片和信息显示在盒子的中间（就像在第 0 天那样），但我无法让它这样做。

  • 您会建议将我的 .js 文件为每个函数分成不同的文件，还是可以将它们全部放在一个中。我想避免混淆？

HTML：

<!doctype html>

<html lang="en">

<head> 
 <meta charset="utf-8"> 
 <title>AccuMeteo</title>
 <meta name="description" content="AccuMeteo Weather Forecast">
 <meta name="keywords" content="Daily and Weekly Weather forecast">
 <link href="css/accumeteo.css" rel="stylesheet">
   <script type="text/javascript" src="js/accumeteo.js"></script>   
</head>

<body>
   <!-- wrapper  section starts -->
    <div id="wrapper">


        <!-- header  section starts -->
    <div id="header">

    <img src="images/header.jpg" width="975" height="220" alt="Blue Sky Header" class="floatleft">

    </div>

        <!-- header  section ends -->

  <!-- menu  section starts -->     
    <div id="menu">
        <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="vancouver.html" id="current" class="first">Vancouver</a></li>
                <li><a href="dallas.html">Dallas</a></li>
                <li><a href="ny.html">New York</a></li>
                    <li><a href="placeholder.html">Contact Us</a></li>
            </ul>
    </div>

        <!-- menu  section ends -->

<div id="content">

<div id="city">
    <h1>Vancouver, BC</h1>
</div>    

<div id="date">
    <noscript> <div>! JavaScript is not enabled.</div> </noscript>

    <div id="PST"></div>
    <div id="year"></div>
    <div id="ordinal"></div>
    <div id="day"></div>
</div>

<div id="panel">


    <div id="day0">
    </div>

    <div id="day1">
    </div>

    <div id="day2">
    </div>

    <div id="day3">
    </div>

    <div id="day4">
    </div>

    <div id="day5">
    </div>

    <div id="day6">
    </div>
</div>

</div>





        <!-- footer section starts -->
    <div id="footer">
        <p class="bottom">Copyright &copy; 2012 JC Design  |  All Rights Reserved  |  <a href="#">Terms and Conditions</a></p>
    </div>
    <!-- foot section ends -->      


    <!-- wrapper section starts -->
  <script>
    displayTime("PST");
</script>
   </div>

</body>
</html>

.css

/*Homepage* /

/*Body*/
html {background-color: #e2e2e2}

body {
   color: #000; background: #fff;
   font-family: Verdana,helvetica,arial, sans-serif; 
   font-size: 90%;
   text-align: left;
   width: 975px;
   margin-left: auto;
   margin-right: auto;
}

p {
   margin-left: 35px;
   margin-right: 25px;
   text-align: left;
}

/*---------------Navigation  styles-------------------*/

#menu {
  float: left; 
  margin:0;
  padding-top: 0px;
  width: 100%;
  background: #4186d3; color: #04356c;
}  


#menu ul {
  margin: 0px;
  position: relative 
}


#menu ul li {
  display: inline; 
}


#menu ul li a {
  float: left;
  padding: 5px 16px;
  margin-right: 0px;
  background: #4186d3; color: #04356c;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}


#menu ul li a:hover {
  color: #04356c; background: #fff;
  text-decoration: underline;
}

#menu li a#current {
  background: #0d56a6; color: #fff;
}

/*Bottom link formatting*/

p.bottom a:link { 
   background: #04356c; color: #fff;
}


p.bottom a:visited { 
   color: #ba1212;
}

p.bottom a:hover {
   color: #f9b41f;  
   text-decoration: none; 
}

p.bottom a:active{
    background: #3ca0d0; color: #000;
}


/*Page wrapper*/
#wrapper {
   margin: 0 auto; 
   width: 975px; 
   text-align: left;
}

/*Banner styles*/

#header {
   background-color: #2d1d06; color: #7d890d;
   font-family: verdana, helvetica, arial, sans-serif;
   font-size: 150%;
   width: 925px;
   padding: 0px;
}


#footer {
   clear: both;
  background: #04356c; color: #fff;
   font-family: Verdana,helvetica, arial, sans-serif;
   font-size: 90%;
   font-weight: normal;
   width: 975px;
   padding-bottom: 3px;
   padding-top: 3px;
}

#footer p {
   text-align: center;
}


.content {
  padding: 0px 0px 0px 160px;
  position: relative;
}


/* Images*/
img { 
   border: 0px; 
   padding: 0px;
}

.floatleft { 
   float: left;
   margin: 0px;
   padding: 0px; 
   border: none;  
}



/*Headings*/
hr{
  position: absolute;
   width: 45%;
   margin-left: 35px;
   margin-right: 45px;
   border: 1px dotted #000; 
}
h1{
   color: #7d890d;
   font-size: 140%;
   font-weight: normal;
   margin-left: 35px;
}

h2{
   color: #052a6e;
   font-weight: normal;
   font-size: 125%;
   margin-left: 35px;
}


/*********************/
/*  Date Properties  */
/*********************/

#date {
   float: right;
   margin: 10px;
}

#day, #ordinal, #year {
   float: right;
}

#ordinal {
   vertical-align: baseline;
   font-size: 0.8em;
   position: relative;
   top: -0.2em;
}


/*  JavaScript Panel Properties  */


#panel {
   font-size: 0.8em;
   width: 100%;
   float: left;
   margin: 5px;
}


#day0, #day1, #day2, #day3, #day4 {
   float: left;
   width: 181px;
   height: 355px;
   border: 1px solid black;
   margin: 4px;
   text-align: center;
}


td,th {
   width: 175px;
   height: 35px;
   font-size: 1.3em;
}

th {
   font-size: 1.5em;
}

#spacerCell {
   height: 70px;
}

.tempLow, .tempHigh {
   font-size: 2em;
   color: blue;
}

.tempHigh {
   color: red;
}

.js

var thisDate = new Date();
var day = thisDate.getDate();
var dayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];

var sun = new Forecast( "sunny.png", "Sunny", 17, 31 );
var clouds = new Forecast( "cloudy.png", "Cloudy", 10, 23 );
var showers = new Forecast( "mix.png", "Mix of Sun and Cloud", 12, 20 );    
var rain = new Forecast( "rain.png", "Rain", 6, 14 );  

var fList = [ sun, clouds, showers, rain ];    
var pList = [ "day0", "day1", "day2", "day3", "day4" ];    

var low, high;


// Functions

function init()
{
    displayDate();
    displayForecast();
}
window.onload=init;


function Forecast( image, title, minTemp, maxTemp )
{
    this.image=image;
    this.title=title;
    this.minTemp=minTemp;
    this.maxTemp=maxTemp;
}


function randomNumber( min, max )
{
    var rand = Math.random() * (max - min + 1) + min;
    rand = Math.floor(rand)
    return rand;
}


function displayTime( timeZone )
{
    var timeE = document.getElementById( timeZone );
    var offset, hh, mm, AMorPM;

    switch ( timeZone )
    {
        case "PST":
            offset = -7;
            break;
        case "EST":
            offset = -4;
            break;
        case "CDT":
            offset = -5;
            break;
        default:
            timeE.innerHTML += "Error!";
    }

    thisDate = calcTime( offset );
    hh = thisDate.getHours();
    mm = thisDate.getMinutes();

    if( mm < 10 ){ mm = "0" + mm; }

    if( hh > 12 )
    {
        hh -= 12;
        AMorPM = " PM";
    }
    else
    {
        AMorPM = " AM";
    }

    timeE.innerHTML += hh + ":" + mm + " " + AMorPM + " (" + timeZone + ")";
}

// This will return a Date object with the city's current time based on that city's "offset" from the GMT.
function calcTime( offset )
{
    var date = new Date();
    date.setTime(date.getTime() + date.getTimezoneOffset()*60*1000 + offset*60*60*1000);
    return date;
}


//This will return a new Date object for a single forecast
function addDays(myDate,days)
{
    return new Date(myDate.getTime() + days*24*60*60*1000);
}


function displayDate()
{
    var dayE = document.getElementById("day");
    var ordinalE = document.getElementById("ordinal");
    var yearE = document.getElementById("year");

    // Display the day of the week and the date (month, day)
    dayE.innerHTML = dayNames[ thisDate.getDay() ] +", ";
    dayE.innerHTML += monthNames[ thisDate.getMonth() ] +" ";
    dayE.innerHTML += " " +day;

    // Function determining which ending to use for the date and displaying it
    switch (day)
    {
        case 1:
        case 21:
        case 31:
            ordinalE.innerHTML += "st";
            break;
        case 2:
        case 22:
            ordinalE.innerHTML += "nd";
            break;
        case 3:
        case 23:
            ordinalE.innerHTML += "rd";
            break;
        default:
            ordinalE.innerHTML += "th";
    }

    // Display the year
    yearE.innerHTML = ", " +thisDate.getFullYear();
}


function getDayTitle( i )
{
    var dayTitle;
    var dayOfWeek = addDays( thisDate, i )
    var d = dayOfWeek.getDay();

    if( d > 6 )
    {
        d -= 7;
    }

    // Function determining which title to use (today, tomorrow, day of the week)
    switch ( i )
    {
        case 0:
            dayTitle = "Today";
            break;
        case 1:
            dayTitle = "Tomorrow";
            break;
        default:
            dayTitle = dayNames[d];
    }
    return dayTitle;
}


function displayForecast()
{
    for( i=0; i < pList.length; i++)
    {
        displayDailyForecast( i );
    }
}


function displayDailyForecast( i )
{
    var forecastE = document.getElementById( pList[i] );
    var forecast = fList[ randomNumber(0,3) ];
    var html = "<table>";

    if( i == 0)
    {
        html += "<tr><td id='spacerCell'></td></tr>"
    }

    html += "<tr><th colspan='2'>" + getDayTitle(i) + "</th></tr>";

    html += "<tr><td colspan='2'><img src='images/" + forecast.image + "' width='100' height='100'></td></tr>";

    html += "<tr><td colspan='2'>" + forecast.title + "</td></tr>";

    getTemp( forecast.minTemp, forecast.maxTemp );
    html += "<tr><td class='tempLow'>"+ low +"&degC</td>";
    html += "<td class='tempHigh'>"+ high +"&degC</td></tr>";

    forecastE.innerHTML += html;
}


function getTemp( min, max )
{
    var t1, t2;

    t1 = randomNumber( min, max );
    t2 = randomNumber( min, max );

    if( t1 < t2 )
    {
        low = t1;
        high = t2;
    }
    else if( t1 > t2 )
    {
        low = t2;
        high = t1;
    }
    else // if t1==t2
    {
        low = t1;
        high = t1 + 1;
    }
}
4

3 回答 3

0

首先我想问你，你真的需要几天使用表格标签吗？我的意思是你不能使用 div 标签吗？因为在 table 标记中，所有内部标记始终具有相对位置。

您可以在 day0 / day1 等带有绝对位置的标签中插入 div 标签，然后使用
divId.innerHTML = getDayTitle(i) （所有您各自的方法）来设置文本，而不是通过 js 生成整个表格。

其次，如果将来如果您更改文本的字体等，那么表格也会产生问题，因为它总是使用“适合内容”类型的方法，因此 tr 大小可能会根据您的文本大小而增加

使用 div 标签，它肯定会工作:)

于 2012-10-18T08:42:36.123 回答
0

给你。使用 padding 属性进行填充，你使用的是 spacercell td 来显示中间的东西，没有一个 js 文件是好的。

编辑：修复了几件事。您在 css 中使用了 .content 选择器而不是 #content 选择器。这是更新的版本。

于 2012-10-18T08:19:52.470 回答
-2

对于新浏览器，请使用 flexbox。 http://www.html5rocks.com/en/tutorials/flexbox/quick/

于 2012-10-18T08:16:24.893 回答