上周面试了两家著名互联网公司的前端开发实习生,他们都问了同样的一个问题,你有没有用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>