妙味js预热课程

Posted 2020-07-12 zzjeny

一、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.onload=function () {
        　　var oBtn=document.getElementById("btn1");
        　　var oTxt=document.getElementById("txt1");
        　　var oDiv=document.getElementById("div1");
        　　oBtn.onclick=function () {
            　　oDiv.innerHTML=oTxt.value;
        　　}
    　　}
　　</script>
                             
 现在开始我们来做简易日历：
                           
首先由html和css做出界面如下，接下来我们为其添加点击事件：
　　1、鼠标滑动到哪一个月份，那个月份就显示当前样式，其他月份恢复到原来样式；

<script type="text/javascript">
   window.onload=function () {
       var aLi=document.getElementsByTagName("li");
       var i=0;
       for(i=0;i<aLi.length;i++){
           aLi[i].onmousemove=function () {
               for(i=0;i<aLi.length;i++){
                   aLi.className="";
               }
               this.className="active";
           }
       }
   }
</script>
　　2、下面的文字内容随着鼠标的滑动到哪个月份而随着改变：

<script type="text/javascript">
   window.onload=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].onmousemove=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.onload=function () {
　　　　　　　　var oBtn1=document.getElementById("btn1");
　　　　　　　　var oBtn2=document.getElementById("btn2");
　　　　　　　　var timer=null;
　　　　　　　　oBtn1.onclick=function () {
　　　　　　　　　　timer=setInterval(show,1000);
　　　　　　　　};
　　　　　　　　oBtn2.onclick=function () {
　　　　　　　　　　clearInterval(timer)
　　　　　　　　}
　　　　　　}
　　　　</script>
　　这里要注意定义的变量timer以及如何应用它；

三、数码时钟

　　　　　　　　

　　数码时钟如何做？效果的思路：
　　1、获取系统时间：
　　　　Date对象
　　　　　　getHour、getMinutes、getSeconds
　　2、显示系统时间
　　　　字符串链接
　　　　空位补零
　　3、设置图片路径
　　　　charAt方法

　　1、如何获取系统时间：
　　　　先声明一个Date对象；
　　　　　　<script type="text/javascript">
　　　　　　　　window.onload=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.onload=function () {
　　　　　　　　var oBtn=document.getElementById("btn1");
　　　　　　　　var aImg=document.getElementsByTagName("img");
　　　　　　　　var i=0;
　　　　　　　　oBtn.onclick=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（）函数的调用；