zoukankan      html  css  js  c++  java
  • 2018-1-12电子表、存成绩、轮播图

      今天整理了几个有关于Javascript的实例:

    1、电子表:

    <body>  
      <h2></h2>  
      <input type="button" value="取消" onclick="cancel()" />  (定义按钮,给按钮添加点击事件,方法名为cancel())
    </body>

    <script type="text/javascript">
      function showtime(){
        var d = new Date();    (定义时间变量,年月日时分秒)
        var year = d.getFullYear();
        var month = d.getMonth();
        var riqi = d.getDate();

        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();
        var timeinfo = year+"-"+month+"-"+riqi+" "+hour+":"+minute+":"+second;  (具体时间)
        document.getElementsByTagName('h2')[0].innerHTML = timeinfo;  (将h2的内容赋值,具体值为时间的值。)
      }
      window.onload = function(){  (将页面加载完成后,执行该方法)
        mytime = setInterval("showtime()",1000);  (添加定时器,每一秒变化一次)
      }
      function cancel(){   (按钮的点击事件,点击“取消”暂停当前时间)
        clearInterval(mytime);
      }
    </script>

    2、存成绩:

    <body>
    (定义s三个数组,分别接收输入语文、数学、英语的成绩)
      第<span id=sp1>1</span>个学生成绩:语文<input type="text" id="yuwen">数学:<input type="text" id="shuxue">英语:<input type="text" id="yingyu"><button onClick="sp()"   id="xiayige">下一个</button><br>
      语文总成绩:<input type="text" id="yuwensum">平均分:<input type="text" id="yuwenavg"><br>
      数学总成绩:<input type="text" id="shuxuesum">平均分:<input type="text"
      id="shuxueavg"><br>
      英语总成绩:<input type="text" id="yingyusum">平均分:<input type="text" id="yingyuavg"><br>
    </body>

    <script type="text/javascript">
      var sp1=document.getElementById("sp1"),  (设变量,获取元素)
        yuwen=document.getElementById("yuwen"),
        shuxue=document.getElementById("shuxue"),
        yingyu=document.getElementById("yingyu"),
        yuwensum=document.getElementById("yuwensum"),
        shuxuesum=document.getElementById("shuxuesum"),
        yingyusum=document.getElementById("yingyusum");
      var arr=[];  (设一个变量为数组,存成绩)
      n=0;
      function sp(){
        arr[n]=[yuwen.value,shuxue.value,yingyu.value];
        n=n+1;
        sp1.innerHTML=n+1;  (第n位学生,改变学生的编号)
        yuwen.value="";
        shuxue.value="";
        yingyu.value="";
        yuwensum.value="";
        shuxuesum.value="";
        yingyusum.value="";
        for(var i in arr){  (二维数组挑选出第i位学生的语文、数学、英语成绩)
          yuwensum.value=yuwensum.value+arr[i][0];  (计算总分)
          shuxuesum.value=shuxuesum.value+arr[i][1];
          yingyusum.value=yingyusum.value+arr[i][2];
        }
        document.getElementById("yuwenavg").value=(+yuwensum.value/arr.length);  (计算各科平均分)
        document.getElementById("shuxueavg").value=(+shuxuesum.value/arr.length);
        document.getElementById("yingyuavg").value=(+yingyusum.value/arr.length)
      }

    </script>

    3、轮播图:

    <body>
      <button id="qian" onClick="xiangqian()"> < </button>
      <img src="1.png" id="tupian" onMouseMove="stop()" onMouseOut="start()">
      <button id="hou" onClick="xianghou()"> > </button>
    </body>
    <script type="text/javascript">
      var qian=document.getElementById("qian");  (定义变量)
      var hou=document.getElementById("hou");
      var tupian=document.getElementById("tupian");
      var arr=["1.png","2.png","3.png"];
      var i=0;
      var n=2;
      var setint=null;
      window.onload=function(){  (不点击按钮时,图片定时调换到下一张图片)
        setint=setInterval(function(){  
        xianghou();
        },1000);
      }
      function stop(){  (鼠标移动到图片上图片静止,不再发生变化)
        clearInterval(setint);
      }
      function start(){  (鼠标移走时,图片继续自动调换到下一张图片)

        setint=setInterval(function(){
          xianghou();
        },1000);
      }
      function xianghou(){  (点击按钮,图片调换到下一张)
        tupian.setAttribute('src',arr[i]);  
        i=i+1;
        if (i>2){  (判断当图片是最后一张时,点击按钮,返回第一张图片)
          i=0;
        }
      }
      function xiangqian(){
        tupian.setAttribute('src',arr[n]);  (点击按钮,图片调换到上一张)
        n=n-1;
        if(n<0){  (判断当图片已经是第一张时,点击按钮,返回最后一张图片)
          n=arr.length-1;
        }
      }

    </script>

  • 相关阅读:
    2020-2021-01 20201230 《信息安全专业导论》第十一周学习总结
    2020-2021-01 20201230 《信息安全专业导论》第十周学习总结
    四则运算
    编程语言
    2020-2021-01 20201230 《信息安全专业导论》第九周学习总结
    2020-2021-01 20201230 《信息安全专业导论》第八周学习总结
    编程之路
    2020-2021-01 20201230 《信息安全专业导论》第七周学习总结
    进制转化
    密码算法及理论总结
  • 原文地址:https://www.cnblogs.com/dns6/p/8277789.html
Copyright © 2011-2022 走看看