javaScript编码个人主页特效

作者：Itzhipan

目录

前言

 轮播特效：

Html源码：

javaScript编码轮播滚动效果：

音频：audio标签 

javaScript编码时间： 

时间与音频特效： 

总结：

---

前言

疫情当下，我们除了焦急的等待疫情过去，我们应该做些什么？

1.保护自己，负起责任

2.身体是永远的本钱

3.假期是你超越别人的机会

 轮播特效：

Html源码：

<ul id="ul" >
                       <li style="background:url(img/mmexport1538456959223.jpg);background-size:cover"></li>
                    <li style="background:url(img/4.jpg);background-size:cover"></li>
                    <li style="background:url(img/m.jpg);background-size:cover"></li>
                    <li style="background:url(img/b.jpg);background-size:cover"></li>
                    <li style="background:url(img/c.jpg);background-size:cover"></li>
                    <li style="background:url(img/k.jpg);background-size:cover"></li>                
                  </ul>    

javaScript编码轮播滚动效果：

<!-- 滚动 -->
     var zss= document.getElementById("zs");
     var oUl = zss.getElementsByTagName("ul")[0];
     var oLi = oUl.getElementsByTagName("li");
     var timer=null;
     oUl.innerHTML+=oUl.innerHTML;
     oUl.style.width=(oLi[0].offsetWidth+20)*oLi.length+"px";

     function sport(){
         oUl.style.left = oUl.offsetLeft-1+"px";
         if(oUl.offsetLeft<-oUl.offsetWidth/2)
         {
              oUl.style.left=0+"px";
            
         }

     }
     timer=setInterval(sport,10);
     for(var i=0;i<oLi.length;i++)
     {
        oLi[i].onmouseover=function()
        {
        clearInterval(timer);
        oUl.style.width=oUl.offsetWidth+30+"px";
        }    
        oLi[i].onmouseout=function()
        {
        timer=setInterval(sport,10);
        oUl.style.width=oUl.offsetWidth-30+"px";
        }
     }

}

音频：audio标签 

<audio autoplay controls loop  src="mp3/周深 - 漂洋过海来看你 - 副本.mp3" style="margin:495 0;width:300;height:40"></audio>

javaScript编码时间： 

     <!-- 时间表 -->
function time()
{
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var timer=document.getElementById("tm");
    var hms=timer.getElementsByTagName("li");

    function toDouble(e)
       {
         if(e<10)
         {
             return "0"+e;
         }else{
             return e;
         }
       }

       hms[0].innerHTML=toDouble(h);
       hms[1].innerHTML=toDouble(m);
       hms[2].innerHTML=toDouble(s);
}
   time();
   setInterval(time,1000);

时间与音频特效： 

总结：

在疫情下，安静的环境中，自由的时间，网上开放的视频课，我们不妨可以静下心来，看看书，学习技能等。开拓自身的视野，发展格局，增长见识！！！