妙味js预热课程

Posted zzjeny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了妙味js预热课程相关的知识,希望对你有一定的参考价值。

一、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()函数的调用;

 

以上是关于妙味js预热课程的主要内容,如果未能解决你的问题,请参考以下文章

2016年5月25日下午(妙味课堂js预热课程-4笔记)

2016年5月25日下午(妙味课堂js预热课程-4笔记二)

妙味 js

妙味JS学习记录

妙味远程课堂-JS热身运动-上

妙味远程课堂-JS热身运动-下