1. 首頁
  2. 問答
  3. Javascript顯示和CSS

Javascript顯示和CSS

2012-10-18 40 views
0

我不得不使用Javascript創建一個「假」天氣頁面。我的佈局掙扎，有幾個問題：Javascript顯示和CSS

  • 我什麼都試過，包括填充我上面的「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; 
    } 
}

來源

2012-10-18 wizzme

+1

任何機會，你可以敲ip的http://www.JSFiddle.com/爲此？ –

+0

你有沒有試過給h1標籤的CSS添加一個padding屬性？ –

+1

不是.com，http://jsfiddle.net，不支持域名垃圾郵件發送者 –

回答

0

Here你走了。使用padding屬性填充，你使用了spacercell td來顯示中間的東西，並且沒有一個js文件是好的。

編輯：修復了一些事情。您在css中使用.content選擇器而不是#content選擇器。 Here是更新後的版本。

來源

2012-10-18 08:19:52

0

首先，我想問你，你真的需要使用表標籤幾天嗎？我的意思是不能使用div標籤？因爲在表格標籤中，所有的內部標籤總是具有相對位置。

可以插入day0/DAY1等絕對位置標籤內div標籤，然後使用
divId.innerHTML = getDayTitle（I） （所有相應的方法）來設置文本，而不是通過JS生成整個表的。

其次，如果在未來，如果你改變文字的字體等，然後還表可能產生問題，因爲它總是使用「適合內容」類型的方法，因此TR大小可根據您的文字大小

div的使用增加標籤和它肯定會工作:)

來源

2012-10-18 08:42:36 user1079065

+0

太棒了。謝謝。 – wizzme

相關問題

 相關問題