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>

原文地址:https://www.cnblogs.com/dns6/p/8277789.html