0

Javascript のみを使用して「偽の」天気ページを作成する必要がありました。レイアウトに苦労しており、いくつか質問があります。

  • 「h1」タイトルの上にパディングを含めるためにあらゆることを試みましたが、何も機能しません。

  • 天気の写真と情報を (day0 のように) ボックスの中央に表示したいのですが、そうすることができません。

  • 私の .js ファイルを関数ごとに別々のものに分割することをお勧めしますか、それともすべてを 1 つにまとめても問題ありませんか。混乱を避けたいですか？

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 タグを使用できないということですか? テーブルタグでは、すべての内部タグが常に相対位置を持っているためです。

絶対位置で day0 / day1 などのタグ内に div タグを挿入し、
divId.innerHTML = getDayTitle(i) (それぞれのすべてのメソッド) を使用して、js を介してテーブル全体を生成する代わりにテキストを設定できます。

第二に、将来的にテキストのフォントなどを変更すると、テーブルも常に「コンテンツに合わせる」タイプの方法を使用するため、問題が発生する可能性があるため、テキストサイズによってはサイズが大きくなる可能性があります

div タグを使用すると、確実に機能します :)

于 2012-10-18T08:42:36.123 に答える
0

どうぞ。パディングには padding プロパティを使用します。途中で表示するためにスペーサーセル 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 に答える