JavaScript特效动画实例—图片轮播 右下角图片广告 原生js日历

于 2015-04-17 20:44:19 发布
阅读量1.9k 收藏
点赞数
分类专栏： JavaScript动画 文章标签： JavaScript原生动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cotexarm7/article/details/45101911
版权
本文分享了作者在面试中意识到JavaScript动画技能的重要性，通过一系列实例，如自动刷新、页面导航、右下角悬浮广告、图片轮播和原生js日历，来提升前端开发能力。这些实例对于提升编程水平和面试准备都有很大帮助。
摘要由CSDN通过智能技术生成

上周面试了两家著名互联网公司的前端开发实习生，他们都问了同样的一个问题，你有没有用js写过一些动画或者写过一些交互性的东西。由此，我意识到了要想成为一个合格的前端工程师，js动画是必须要熟练掌握的，比如用原生js写幻灯片、轮播、导航菜单，等等。因此，我想把js动画实例总结起来，一方面提高自己的编程水平，另一方面，对于准备面试也大有裨益。

1、自动刷新页面

setTimeinterval(() => {
    location.reload() 
},1000)

2、让页面后退和前进：

history.forward() 
history.back()

4、点击跳转另外一个地址：

location.href=....  .value;
<html>

<head>

<title>ajax</title>

<meta charset="utf-8">

<script type="text/javascript">

function changeTitle()

{

document.title=document.getElementById("input").value;

}

</script>

</head>

<body>

<input type="text" id="input" value=""/>

<input type="button" value="修改标题" id="button" onclick="changeTitle()">

</body>

</html>
window.onload=function:页面加载完全后调用

实例5、带关闭按钮的右下角图片广告，始终悬浮在窗口右下角

<html>

<head>

<title>ajax</title>

<meta charset="utf-8">

<script type="text/javascript">

  function posRightCorner(){

    ad.style.top=document.body.clientHeight-120;

 ad.style.left=document.body.clientWidth-200;

 setTimeout("posRightCorner()",100);

  }

  function closeAD()

  {

    ad.style.display="none";

  }

  window.onload=function(){

  var ad=document.getElementById('ad');

  posRightCorner();

  }

</script>

</head>

<body>

<div style="border:1px solid black;z-index:99999;width:180px;position:absolute;height:116px;background-color:rgb(201,211,243);" id="ad">

 <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#cfdef4">

   <tr>

     <td width="90%" valign="middle" height="24"></td>

  <td width="" valign="middle" align="right">

     <a title="关闭" onclick="closeAD()" style="cursor:pointer;">X</a>

  </td>

   </tr> 

   <tr>

     <td height="90" colspan="3">广告内容，内增高</td>

   </tr>   

 </table> 

</div>

</body>

</html>

实例6、表单：表单form，对于一般dom元素来说，通过点操作符只能访问到自身的属性的值，而表单元素可以访问到它包含的控件。通过name属性

<html>

<head>

<title>ajax</title>

<meta charset="utf-8">

<script type="text/javascript">

function ck(){

   var f=document.forms[0];

   f.reset(); //初始化表单里所有控件的值到最初状态

   //动态为表单添加边框

   f.style.width="300px";

   f.style.border="1px solid black";

   var e1=f.myRadio[0];

   e1.focus();//让控件获得焦点



document.forms[0].myhidden.value="我是隐藏的";  



   var e=f.elements;

   var str='';

   var e1=f.myText;

   alert(e1.value);

   for(var i=0;i<e.length;i++)

   {

    str+=e[i].value+' ';

   }

   alert(str);

}

</script>



</head>

<body>

 <form>

   文本框：<input type="text" name="myText" value=""/>

   <br/>

   单选框：<input type="radio" name="myRadio" value="11"/><input type="radio" name="myRadio" value="22"/>

   <br/>

   下拉框：<select name="mySelect">

               <option value="">请选择</option>

     <option value="1">1</option>

     <option value="2">2</option>  

            </select>

    <br/>

 <input type="button" value="得到控件的值" onclick="ck();"/>

 <input type="hidden" name="hidden" />

 </form>

</body>

</html>

实例7：图片轮播js

<html>

<head>

<title>ajax</title>

<meta charset="utf-8">

<script type="text/javascript">

//未解决：：1、监听鼠标切入清楚定时器，2、下标少了

//z-index 和position:absolute隐藏

   var currIndex=1;

   function init()

   {

    var length=5;

 for(var i=0;i<length;i++)

 {

   document.getElementById("slideshow_footbar").innerHTML+='<div class="slideshow_bt" index="'+(length-i)+'"></div>';

 }

 //得到按钮的doms

 var btns=document.getElementsByClassName('slideshow_bt');



 btns[length-1].className+='bt-on';

 for(var i=0;i<btns.length;i++)

 {

   btns[i].onclick=function(){

     slideTo(this.attributes['index'].value);

   };

 }



 setInterval(function(){

   if(currIndex+1>5)

      {currIndex=0;}



   slideTo(currIndex+1);

 },5000);  

   }

   

   function slideTo(index){

      index=parseInt(index);

   var picArr=document.getElementById("slideshow_photo").childNodes;

   for(var i=0;i<picArr.length;i++)

   {

     if(picArr[i].attributes&&picArr[i].attributes['index']&&parseInt(picArr[i].attributes['index'].value)==index)

   {

     picArr[i].style.zIndex=2;

     currIndex=index;

   }else if(picArr[i].attributes&&picArr[i].attributes['index']){

     picArr[i].style.zIndex=1;

   }

   }

   //处理下标

   var btns=document.getElementsByClassName("slideshow_bt");

   for(var i=0;i<btns.length;i++)

   {

     if(parseInt(btns[i].attributes['index'].value)==index)

    {btns[i].className='slideshow_bt bt-on';}else{

     btns[i].className='slideshow_bt';

    }

   }

   }

</script>

  <link rel="stylesheet" type="text/css" href="css/slide.css"/>

</head>

<body onload="init();">

   <div id="slideshow_wrapper">

    <div id="slideshow_photo">

   <a target="_blank" style="z-index:2" href="#" index="1"><img border=0 src="1.jpg" height="400px" width="650px"/></a>

   <a target="_blank" style="z-index:1" href="#" index="2"><img border=0 src="2.jpg" height="400px" width="650px"/></a>

   <a target="_blank" style="z-index:1" href="#" index="3"><img border=0 src="3.jpg" height="400px" width="650px"/></a>

   <a target="_blank" style="z-index:1" href="#" index="4"><img border=0 src="4.jpg" height="400px" width="650px"/></a>

   <a target="_blank" style="z-index:1" href="#" index="5"><img border=0 src="5.jpg" height="400px" width="650px"/></a>

 </div>



 <div id="slideshow_footbar">

 </div>

   </div>

</body>

</html>
slide.css

#slideshow_wrapper{

  position:relative;

  padding:0px;

  background-color:gray;

  width:650px;

  height:400px;

  overflow:hidden;

}



#slideshow_footbar{

  z-index:5;

  position:absolute;

  filter:alpha(opacity=50);  /*滤镜，具体还不太清楚*/

  width:100%;

  bottom:0px;

  height:30px;

  background-color:black;

  opacity:0.5;  /* 半透明*/

}

#slideshow_photo{

  position:absolute;

  width:100%;

  height:100%;

  cursor:point;

}



#slideshow_photo a{

  z-index:1;

  border:0px;

  position:absolute;

  margin:0px;

  display:block;

  top:0px;

  left:0px;



}



#slideshow_footbar .slideshow_bt{

 background-color:#d2d3d4;

 margin:10px 10px 0px 0px;

 width:10px;

 height:10px;

 display:inline;

 float:right;

 font-size:12px;

} /*为什么会居中，为什么表现形式*/



#slideshow_footbar .bt-on{

 background-color:#30b1eb;

}

//问题：1、小标少了 2、鼠标切入停止切换

 

实例8：从左往右浏览广告

<html> 
<head> 
<title>ajax</title> 
<meta charset="utf-8"> 
<script type="text/javascript"> //由左向右滚动广告 
var timer=null; 
function init(){ 
  var time=30; 
  var con_ul=document.getElementById("con_ul"); 
  function MyMarquee(){ 
    var left=con_ul.style.left;   
    left=parseInt(left);   
    con_ul.style.left=(left-1)+'px';
    if(left*-2==parseInt(con_ul.style.width)){ 
      con_ul.innerHTML+=con_ul.innerHTML;
    } 
  } 
  timer=setInterval(MyMarquee,time); 
  con_ul.onmouseover=function () {
    clearInterval(timer);
  } 
  con_ul.onmouseout=function () {
    timer=setInterval(MyMarquee,time);
  } 
} 
</script> 
<style>  #container li{overflow:hidden; float:left; margin:0 5px;} </style> 
<link rel="stylesheet" type="text/css" href="css/slide.css"/> 
</head> 
<body style="text-align:center" onload="init();">   
  <div id="container" style="width:400px;visibility:visible;overflow:hidden;position:relative; z-index:1;left:0px;"> 
    <ul id="con_ul" style="margin:0px;padding:0px;position:relative;list-style-type:none; z-index:2;width:6100px;left:0px;">
      <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
      <li><a target="_blank" href="#"><img src="2.jpg"><br>123123</a></li>
      <li><a target="_blank" href="#"><img src="3.jpg"><br>123123</a></li>
      <li><a target="_blank" href="#"><img src="4.jpg"><br>123123</a></li>
      <li><a target="_blank" href="#"><img src="5.jpg"><br>123123</a></li>
    </ul>
  </div> 
</body> 
</html>

实例9：选中日期并显示

效果图上图

<html> 
<head> 
<title>jQuery</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<SCRIPT LANGUAGE="JavaScript"> 
function init(){ 
var y=document.getElementById("y"); 
var m=document.getElementById("m"); 
var str=""; 
for(var i=2000;i<2030;i++) 
{ 
str+='<option value="'+i+'">'+i+'</option>'; 
} 
y.innerHTML=str; 
str=""; 
for(var i=1;i<=12;i++) 
{ 
str+='<option value="'+i+'">'+i+'</option>'; 
} 
m.innerHTML=str; 
} 
function showDetail(){ 
var year=document.getElementById("y").value; 
year=parseInt(year); 
var month=parseInt(document.getElementById('m').value); 
var days=30; 
if(isRunNian(year)&&month==2){ 
days=29; 
} 
else if(month==1||month==3||month==5||month==7||month==8||month==10||month==12) 
{days=31;} 
var str='<tr>'; 
for(var i=1;i<=7;i++) 
{ 
str+="<td>星期"+i+"</td>"; 
} 
str+="</tr>"; 
var date=new Date(year,month-1,1); 
var week=date.getDay(); 
var j=1; 
while(true) 
{ 
str+='<tr>'; 
for(var i=1;i<=7;i++) 
{ 
if(j==1&&i==week) 
{ 
str+='<td onclick="fillDay('+j+');">1</td>'; 
j++; 
}else if(j>1&&j<=days){ 
str+='<td onclick="fillDay('+j+');">'+j+'</td>'; 
j++; 
}else 
str+="<td> </td>"; 
} 
str+='</tr>'; 
if(j>days) 
break; 
} 
document.getElementById("tb1").innerHTML=str; 

} 

function isRunNian(y){ 
return y%4==0; 
} 

function fillDay(d) 
{ 
var y=document.getElementById("y").value; 
var m=document.getElementById("m").value; 
window.currDateInput.value=y+"年"+m+"月"+d+"日"; 

} 
function inputDate(input) 
{ 
window.currDateInput=input; 
var d=document.getElementById("d_div"); 
var y=document.getElementById("y"); 
var m=document.getElementById("m"); 
var now=new Date(); 
y.value=now.getFullYear(); 
m.value=now.getMonth()+1; 
d.style.display="block"; 
showDetail(); 
} 
</SCRIPT> 
</head> 
<body style="text-align:center" onload="init();"> 
<p><input type="text" onfocus="inputDate(this)"/></p> 
<div id="d_div" style="border:1px solid red; display:none;width:400px;margin:0 auto; padding:5px;"> 
<p> 
<select id="y"></select>年 
<select id="m" onchange="showDetail()"></select>月 
</p> 
<table id="tb1" border="1" align="center"></table> 
</div> 
<a href="http://www.baidu.com">dddd</a> 
<script src="https://code.jquery.com/jquery.js"></script> 
</body> 
</html> 

 

fechild
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值