一、js简易日历
1、innerHTML的使用:
a:设置内容并为其加样式:
<input id="txt1" type="text" />
<input id="btn1" type="button" value="设置文字" />
<div id="div1"></div>
<style>
#div1{width:200px;height:200px;background:#ccc;}
</style>
b:为内容添加事件:(注意innerHTML的使用情况);
<script type="text/javascript">
window.οnlοad=function () {
var oBtn=document.getElementById("btn1");
var oTxt=document.getElementById("txt1");
var oDiv=document.getElementById("div1");
oBtn.οnclick=function () {
oDiv.innerHTML=oTxt.value;
}
}
</script>
现在开始我们来做简易日历:
首先由html和css做出界面如下,接下来我们为其添加点击事件:
1、鼠标滑动到哪一个月份,那个月份就显示当前样式,其他月份恢复到原来样式;
<script type="text/javascript">
window.οnlοad=function () {
var aLi=document.getElementsByTagName("li");
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].οnmοusemοve=function () {
for(i=0;i<aLi.length;i++){
aLi.className="";
}
this.className="active";
}
}
}
</script>
2、下面的文字内容随着鼠标的滑动到哪个月份而随着改变:
<script type="text/javascript">
window.οnlοad=function () {
var aLi=document.getElementsByTagName("li");
var oText=document.getElementById("tab").getElementsByTagName("div")[0];
var aDatas=[
"快过年了,大家快去玩吧!",
"快过年了,大家快去玩吧!",
"快过年了,大家快去玩吧!",
"快过年了,大家快去玩吧!",
"快过年了,大家快去玩吧!",
"........"
];
var i=0;
for(i=0;i<aLi.length;i++){
aLi.index=i;
aLi[i].οnmοusemοve=function () {
for(i=0;i<aLi.length;i++){
aLi.className="";
}
this.className="active";
oText.innerHTML="<h2>"+this.index+1+"月活动</h2><p>"+aDatas[this.index]+"</p>";
}
}
}
</script>
这里要注意以下数组的概念......;
这样一个简易的日历就完成了。
二、定时器使用:
1、定时器的作用
2、开启定时器
setInterval 间隔型
setTimeout 延时型
两种定时器的区别
3、停止定时器
clearInterval
clearTimeout
第一步:制作两个按钮:
<input id="btn1" type="button" value="开启定时器" />
<input id="btn2" type="button" value="关闭定时器" />
第二步:为这两个按钮添加点击事件:
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
定时器打开和关闭的代码如下:
<script type="text/javascript">
function show() {
alert("a");
}
window.οnlοad=function () {
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var timer=null;
oBtn1.οnclick=function () {
timer=setInterval(show,1000);
};
oBtn2.οnclick=function () {
clearInterval(timer)
}
}
</script>
这里要注意定义的变量timer以及如何应用它;
三、数码时钟
数码时钟如何做?效果的思路:
1、获取系统时间:
Date对象
getHour、getMinutes、getSeconds
2、显示系统时间
字符串链接
空位补零
3、设置图片路径
charAt方法
1、如何获取系统时间:
先声明一个Date对象;
<script type="text/javascript">
window.οnlοad=function () {
var oDate=new Date();
alert(oDate.getSeconds());
}
</script>
它的作用是获取系统里面的时间;这里面的new是用来初始化一个对象;创建一个对象;然后用来获取系统时间即oDate.getSeconds();
获取完整的时间:var str=oDate.getHours()+"点"+oDate.getMinutes()+"分"+oDate.getSeconds()+"秒";
alert(str);
下面对其进行布局:布局代码如下:
<img src="0.jpg" />
<img src="0.jpg" />
点
<img src="0.jpg" />
<img src="0.jpg" />
分
<img src="0.jpg" />
<img src="0.jpg" />
秒
a、注意空位补零函数代码如下:
function toDouble() {
if(num<10){
return "0"+num;
}
else{
return ""+num;
}
}
b、注意charAt方法:
charAt() 方法可返回指定位置的字符。
<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>
以上代码结果输出e。
2、最后整个自动跳转时间代码如下:
<script type="text/javascript">
function toDouble() {
if(num<10){
return "0"+num;
}
else{
return ""+num;
}
}
window.οnlοad=function () {
var oBtn=document.getElementById("btn1");
var aImg=document.getElementsByTagName("img");
var i=0;
oBtn.οnclick=function updateTime() {
var oDate=new Date();
var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
for(i=0;i<aImg.length;i++){
aImg[i].src="img/"+str.charAt(i)+".png";
}
setInterval(updateTime,1000);
updateTime();
}
</script>
注意这里面用到了一个定时器来自动更新时间以及updateTime()函数的调用;