 |
| Damn these bugs! They're everywhere! |
I had this idea to make a calendar interface that would display the date... in Chinese. Like a Chinese calendar. So I broke out some HTML and CSS, and began populating it with JavaScript. It was the start of July this year. That fact will soon be relevant.
I ended up with this code. Upon page load, it should take today's date and render it in the style I wanted.
<!DOCTYPE html>
<html>
<head>
<title>Chinese Calendar</title>
<style>
.calframe
{
width: 250px;
height: 250px;
margin: 10% auto 0 auto;
border: 3px solid #009900;
color: #00AA00;
}
.calframe div
{
width: 100%;
padding: 5px;
}
#month
{
font-size: 1em;
}
#day
{
text-align: center;
font-size: 4.5em;
font-weight: bold;
}
</style>
<script>
function replaceNumbers()
{
var numbers =
[
"一", "二", "三", "四", "五", "六", "七", "八", "九", "十",
"十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
"二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九", "三十",
"三十一"
];
var d = new Date();
var month = d.getMonth();
var day = d.getDay();
document.getElementById("month").innerHTML = numbers[month] + "月";
document.getElementById("day").innerHTML = numbers[day - 1];
}
</script>
</head>
<body onload="replaceNumbers();">
<div class="calframe">
<div id="month"></div>
<div id="day"></div>
</div>
</body>
</html>
<html>
<head>
<title>Chinese Calendar</title>
<style>
.calframe
{
width: 250px;
height: 250px;
margin: 10% auto 0 auto;
border: 3px solid #009900;
color: #00AA00;
}
.calframe div
{
width: 100%;
padding: 5px;
}
#month
{
font-size: 1em;
}
#day
{
text-align: center;
font-size: 4.5em;
font-weight: bold;
}
</style>
<script>
function replaceNumbers()
{
var numbers =
[
"一", "二", "三", "四", "五", "六", "七", "八", "九", "十",
"十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
"二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九", "三十",
"三十一"
];
var d = new Date();
var month = d.getMonth();
var day = d.getDay();
document.getElementById("month").innerHTML = numbers[month] + "月";
document.getElementById("day").innerHTML = numbers[day - 1];
}
</script>
</head>
<body onload="replaceNumbers();">
<div class="calframe">
<div id="month"></div>
<div id="day"></div>
</div>
</body>
</html>
And it worked too... well, for about a week. This was what it looked like on 4th July.
What Went Wrong
After a week, on 8th of July, it showed this. In Chinese, 1st July.
And 9th July. In Chinese, 2nd July.
10th July. In Chinese, 3rd July.
Why It Went Wrong
The fact that it worked for the first week, gave me a clue. I did some reading on the getDay() method in JavaScript. Turns out it was getting the day of the week instead of the day of the month!This was why it worked on the first week - because 1st July started on a Monday! And 2nd July was on a Tuesday, and so on. So even though the output was wrong, it looked correct. Until the second week rolled around.
How I Fixed It
All I needed to do was change the getDay() method call to getDate().var day = d.getDate();
And now it worked! It showed 10th July in Chinese... on 10th July!
Moral of the Story
This isn't the first time I've ever been fooled by the name of a method, with comical results. It's tempting to blame badly-named methods for this. As every programmer knows, naming things is pretty friggin' hard.Still, it's on me. I should have been more aware of the methods I was attempting to use.
Good day (or date) to you!
T___T
T___T
No comments:
Post a Comment