5秒之后跳转
<div id="text"></div>
<script>
k=5;
function tiaozhuan(){
var text=document.getElementById("text");
text.innerHTML=k+"秒之后跳转";
k--;
if(k==0){
window.location.href="http://www.baidu.com";//这里可以跳转到自己的页面 网上的地址 本地的地址 图片 ......
}
if(k<0){
k=5;
}
}
tiaozhuan();
window.setInterval("tiaozhuan()",1000);
</script>
========================
两秒随机刷新图片
<script> function Datedemo(){ var d,s="today's date is:"; d=new Date(); s+=(d.getMonth()+1)+"/"; s+=d.getDate()+"/"; s+=d.getYear()+"/"; return(s); //把函数的结果返回给函数名 } sum=Datedemo(); //调用函数 并把函数赋值给一个全局变量 alert(sum); //输出变量 </script> ========================
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> </style> </head> <body > <div id="div1" οnclick="change()" style="width:100px;height:200px;border:1px solid red"></div> <div id="div2"></div> <script> function change(){ var arr1=['1.jpg','2.jpg','3.jpg','4.jpg']; var s=Math.round(Math.random()*3); var div1=document.getElementById("div1"); div1.style.background="url(images/"+arr1[s]+")"; var div2=document.getElementById("div2"); div2.innerHTML+=s; }change(); window.setInterval("change()",1000); </script> </body> </html>
========================
白窗========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0px; } ul{ list-style:none; } .ppt{ width:600px; height:400px; background:url(images/1.jpg); margin:0 auto; } .ppt ul{ float:right; margin-top:350px; margin-right:80px; } .pptli1{ float:left; width:15px; height:15px; line-height:15px; text-align:center; border:1px solid #000; margin-left:3px; background:rgba(255,255,255,0.5); } .pptli2{ float:left; width:15px; height:15px; line-height:15px; text-align:center; border:1px solid #000; margin-left:3px; background:rgba(255,0,0,0.5); color:#fff; } </style> </head> <body οnlοad="starts(1)"> <div class="ppt" id="ppt"> <ul> <li class="pptli2" id="li0" οnmοuseοver="change(0,this.id)" οnmοuseοut="starts(1)">1</li> <li class="pptli1" id="li1" οnmοuseοver="change(1,this.id)" οnmοuseοut="starts(2)">2</li> <li class="pptli1" id="li2" οnmοuseοver="change(2,this.id)" οnmοuseοut="starts(3)">3</li> <li class="pptli1" id="li3" οnmοuseοver="change(3,this.id)" οnmοuseοut="starts(0)">4</li> </ul> </div> <script> //手动切换图片 var ppt=document.getElementById("ppt"); var arrimg=['1.jpg','2.jpg','3.jpg','4.jpg']; function change(index,liid){ window.clearInterval(Time); //停止计时器 ppt.style.background="url(images/"+arrimg[index]+")"; //拼接背景图片的路径 ppt.style.backgroundSize="100% 100%"; //还原之前li的样式 for(i=0;i<arrimg.length;i++){ var lis=document.getElementById("li"+i); lis.className="pptli1"; } //改变当前经过li的样式 var liobj=document.getElementById(liid); liobj.className="pptli2"; //给当前的li添加类名 } //自动切换图片 var k=0; function autoplay(){ ppt.style.background="url(images/"+arrimg[k]+")"; ppt.style.backgroundSize="100% 100%"; //还原之前li的样式 for(f=0;f<arrimg.length;f++){ var lis=document.getElementById("li"+f); lis.className="pptli1"; } //改变当前经过li的样式 var liobj=document.getElementById("li"+k); liobj.className="pptli2"; k++; //依次往下循环图片 if(k>=arrimg.length){ k=0; } } var Time=null; function starts(next){ Time=window.setInterval('autoplay()',2000); k=next; } </script> </body> </html> ===================== 白窗2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>网页标题</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> div{ border:1px solid red; width:600px; } div ul{ float:right; } ul li{ list-style:none; border:1px solid red; width:22px; height:22px; margin-top:2px; margin-right:35px; text-align:center; line-height:22px; } </style> <script type="text/javascript"> //页面加载完成之后让图片自动动起来 window.οnlοad=init; //i表示显示的第几张图片 var i=1; var dingshiqi; function init(){ var obj = document.getElementById("li1"); obj.style.background="orange"; dingshiqi = window.setInterval("tupian()",1000); } //让图片自动切换的函数 function tupian(){ i++; if(i>6){ i=1; } //获取了img对象 var obj = document.getElementById("d1"); //修改img对象的src属性 obj.src="images/dd_scroll_"+i+".jpg"; //再去修改li标签的背景颜色 ys(); var yanse = document.getElementById("li"+i); yanse.style.background="orange"; } //鼠标放到图片上停止图片自动切换的函数 function stopTu(){ window.clearInterval(dingshiqi); } //鼠标离开图片让图片自动切换的函数 function startTu(){ dingshiqi = window.setInterval("tupian()",1000); } //鼠标放到li标签上显示对应图片的函数 function tingTu(n,m){ i=n; var obj = document.getElementById("d1"); obj.src="images/dd_scroll_"+n+".jpg"; //把所有的li标签的背景颜色变成白色 ys(); window.clearInterval(dingshiqi); m.style.background="orange"; } //鼠标离开li标签让图片继续自动切换 function dongTu(){ dingshiqi = window.setInterval("tupian()",1000); } //清除所有标签的背景颜色 function ys(){ for(var j=1;j<=6;j++){ var Allobj = document.getElementById("li"+j); Allobj.style.background="white"; } } </script> </head> <body> <div> <img id="d1" src="images/dd_scroll_1.jpg" οnmοuseοver="stopTu()" οnmοuseοut="startTu()"> <ul> <li id="li1" οnmοuseοver="tingTu(1,this)" οnmοuseοut="dongTu()">1</li> <li id="li2" οnmοuseοver="tingTu(2,this)" οnmοuseοut="dongTu()">2</li> <li id="li3" οnmοuseοver="tingTu(3,this)" οnmοuseοut="dongTu()">3</li> <li id="li4" οnmοuseοver="tingTu(4,this)" οnmοuseοut="dongTu()">4</li> <li id="li5" οnmοuseοver="tingTu(5,this)" οnmοuseοut="dongTu()">5</li> <li id="li6" οnmοuseοver="tingTu(6,this)" οnmοuseοut="dongTu()">6</li> </ul> </div> </body> </html>
乘法口诀表========================<script> for(i=1;i<=9;i++){ for(j=1;j<=i;j++){ document.write(j+"*"+i+"="+i*j+" "); } document.write("<br/>"); } </script>
抽奖========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>抽奖</title> <style type="text/css"> .div1{ width: 200px; height: 200px; border:1px solid red; margin:0 auto; } .name{ width: 200px; height: 150px; border:1px solid red; line-height:150px; text-align:center; font-size:30px; } .div1 input { width: 80px; height: 40px; border:1px solid red; background-color:#888; margin:3px 0 0 10px; } </style> </head> <body> <div class="div1" id="div1"> <div class="name" id="names">张三</div> <input type="button" value="开始" οnclick="starts2()"> <input type="button" value="结束" οnclick="stops()"> </div> <script> var arrname=['张三','李四','赵六','王五','赵六','田七','赵六','黄八','米酒','赵六','关羽','赵云','赵六','张飞','貂蝉','赵六','吕布']; var div1=document.getElementById("div1"); var names=document.getElementById("names"); var i=0; function starts(){ names.innerHTML=arrname[i]; //把数组的元素赋值到div中 i++; if(i>=arrname.length){ i=0; }//判断当i的值到了数组长度的时候,要从0开始再进行循环 } var Time=null; function starts2(){ window.clearInterval(Time); //防止计时器叠加 Time=window.setInterval("starts()",100); //包含计时器的函数与计时器调用的函数要区分开 //包含计时器的函数表示:事件触发后加载这个计时器 //计时器调用的函数表示:计时器加载时调用这个函数 } function stops(){ window.clearInterval(Time); /停止计时器 } </script> </body> </html>
倒等腰三角形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script> ======================== //倒等腰三角形第一种写法 for(i=1;i<=5;i++){ for(z=1;z<=i;z++){ document.write("-"); } for(j=11-2*i;j>0;j--){ document.write("*"); } document.write("<br/>"); } ======================== //倒等腰三角形第二种写法 for(i=1;i<=5;i++){ for(z=1;z<=i;z++){ document.write("-"); } for(j=12-z-i;j>0;j--){ document.write("*"); } document.write("<br/>"); } </script> </body> </html>
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script> ======================== //第一种写法 for(i=9;i>0;i--){ for(j=i;j>0;j--){ document.write("*"); } document.write("<br/>"); } document.write("<br/>"); ======================== //第二种写法 for(i=1;i<=9;i++){ for(j=9;j>=i;j--){ document.write("*"); } document.write("<br/>"); } document.write("<br/>"); </script> </body> </html>
点击按钮放大div<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script> for(i=1;i<=6;i++){ for(z=1;z<=6-i;z++){ //i=1; z=1;z=2;...z=5; 换行 document.write("-"); } for(j=1;j<=2*i-1;j++){ document.write("*"); } document.write("<br/>"); } </script> </body> </html> ========================
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>点击按钮放大div</title> <style> .div1 { width: 100px; height: 100px; background-color:red; } </style> </head> <body> <div class="div1" id="div1"></div> <input type="button" placeholder="" value="放大" id="but1" οnclick="change()"> <script type="text/javascript"> var div1=document.getElementById("div1"); function change(){ div1.style.width="200px"; div1.style.height="200px"; div1.style.background="blue"; } </script> </body> </html>
获取系统时间========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="time"></div> <script> function addZero(s){ //定义一个函数添加0,s是传过来给谁加0 if(s<10){ //判断如果传过来的值小于10 ,返回前边加个0 return "0"+s; }else{ return s; //判断如果传过来的值大于等于10 ,不用加0,返回本身。 } } function date(){ //定义时间函数 var time=document.getElementById("time"); //获取html中div这个元素 var date=new Date(); //获取当前系统时间 var year=date.getFullYear(); //获取年份 var month=addZero(date.getMonth()+1); //获取月份,它的值是从0开始所以+1; var day=addZero(date.getDate()); //获取的天 var hours=addZero(date.getHours()); //获取小时 var minutes=addZero(date.getMinutes()); //获取分钟 var sec=addZero(date.getSeconds()); //获取秒 var week=date.getDay(); //获取星期 switch(week){ //流程判断,来判断week中的值0,1,2,3,4,5,6 case 1:week="星期一";break; //如果week的值是1,就返回week等于星期一,然后停止判断 case 2:week="星期二";break; //如果week的值是2,就返回week等于星期二,然后停止判断 case 3:week="星期三";break; //如果week的值是3,就返回week等于星期三,然后停止判断 case 4:week="星期四";break; //如果week的值是4,就返回week等于星期四,然后停止判断 case 5:week="星期五";break; //如果week的值是5,就返回week等于星期五,然后停止判断 case 6:week="星期六";break; //如果week的值是6,就返回week等于星期六,然后停止判断 case 0:week="星期日";break; //如果week的值是0,就返回week等于星期日,然后停止判断 } time.innerHTML=year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+sec+" "+week; //赋值给html中div元素的内容 } window.setInterval("date()",1000); //启动定时器,让浏览器每一秒中都执行一遍date()函数,获取系统是时间。1000毫秒=1秒 date(); /*这叫调用函数 因为计时器里面的函数启动为1秒后 所以页面刷新时会有一秒钟的空白,那么就要在页面加载时启动这个函数*/ </script> </body> </html>
计算器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <input type="text" id="firstnum"/> <select name="symbol" id="symbol"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="twonum" /> =<input type="text" id="sumnum" οnfοcus="relust()"/> <script> var firstnum=document.getElementById('firstnum'); var symbol=document.getElementById('symbol'); var twonum=document.getElementById('twonum'); var sumnum=document.getElementById('sumnum'); function relust(){ if(symbol.value=="+"){ sumnum.value=Number(firstnum.value)+Number(twonum.value); }else if(symbol.value=="-"){ sumnum.value=Number(firstnum.value)-Number(twonum.value); }else if(symbol.value=="*"){ sumnum.value=Number(firstnum.value)*Number(twonum.value); }else { sumnum.value=Number(firstnum.value)/Number(twonum.value); } } </script> </body> </html>
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>加减乘除计算器</title> </head> <body> <table> <input type="text" id="text" name="text"> <!-- 这里不用tr td --> <tr> <td><input type="button" value="1" οnclick="getnum(this.value)" id="num1"></td> <td><input type="button" value="2" οnclick="getnum(this.value)" id="num2"></td> <td><input type="button" value="3" οnclick="getnum(this.value)" id="num3"></td> <td><input type="button" value="+" οnclick="getnum(this.value)" id="num4"></td> </tr> <tr> <td><input type="button" value="4" οnclick="getnum(this.value)" id="num5"></td> <td><input type="button" value="5" οnclick="getnum(this.value)" id="num6"></td> <td><input type="button" value="6" οnclick="getnum(this.value)" id="num7"></td> <td><input type="button" value="-" οnclick="getnum(this.value)" id="num8"></td> </tr> <tr> <td><input type="button" value="7" οnclick="getnum(this.value)" id="num9"></td> <td><input type="button" value="8" οnclick="getnum(this.value)" id="num10"></td> <td><input type="button" value="9" οnclick="getnum(this.value)" id="num11"></td> <td><input type="button" value="*" οnclick="getnum(this.value)" id="num12"></td> </tr> <tr> <td><input type="button" value="c" οnclick="del()" id="num13"></td> <td><input type="button" value="0" οnclick="getnum(this.value)" id="num14"></td> <td><input type="button" value="%" οnclick="getnum(this.value)" id="num15"></td> <td><input type="button" value="/" οnclick="getnum(this.value)" id="num16" ></td> <td><input type="button" value="=" οnclick="results()" id="num16" ></td> </tr> </table> <script> function getnum(val){ var text=document.getElementById("text"); //计算器文本框把输入的值累加起来 if(text.value.indexOf("=")>0){ //触发点击事件后如果文本内的=号大于零 就清空文本 text.value=""; } text.value+=val; } function results(){ var textobj=document.getElementById("text").value; if(textobj.indexOf("=")<0){ //判断文本如果有=号 就开始计算 document.getElementById("text").value+="="+eval(textobj); } } function del(){ document.getElementById("text").value=""; //清空计算器 } </script> </body> </html>
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>简单计算器</title> </head> <body> 第一个数:<input type="text" name="first" id="first" /> 第二个数:<input type="text" name="twonum" id="twonum" /> <input type="button" value="求和" οnclick="Onsum()"> 结果为:<input type="text" name="sum" id="sum" /> <script> function Onsum(){ var first=document.getElementById("first"); var twonum=document.getElementById("twonum"); var sum=document.getElementById("sum"); sum.value=Number(first.value)+Number(twonum.value); } </script> </body> </html>
截取字符串课程表<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="div1"></div> <div id="div2"></div> <script type="text/javascript"> var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var str1="外媒称,中国准备启动世界最大的气象控制工程。不排除其中运用的技术未来可能成为气象武器的基础"; /* div1.innerHTML=str1.substring(4,6); div2.innerHTML=str1.substr(4,2);*/ div1.innerHTML=str1.substring(8,10); div1.innerHTML+=str1.substr(8,2); </script> </body> </html> ========================
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>课程表</title> </head> <body> <script> var arr=[['<sub>课时</sub>\<sup>星期</sup>','星期一','星期二','星期三','星期四','星期五','星期六','星期日'],['第一节','语文','语文','语文','语文','语文','语文','休息'],['第二节','数学','数学','数学','数学','数学','数学'],['第三节','体育','体育','体育','体育','体育','体育'],['第四节','音乐','音乐','音乐','音乐','音乐','音乐'],['中午','午休'],['第五节','语文','语文','语文','语文','语文','语文'],['第六节','体育','体育','体育','体育','体育','体育'],['第七节','音乐','音乐','音乐','音乐','音乐','音乐'],['第八节','自习','自习','自习','自习','自习','自习']] document.write("<table border='1' align='center' width='800' height='500'>"); for(i=0;i<arr.length;i++){ document.write("<tr>"); for(j=0;j<arr[i].length;j++){ if(arr[i][j]=="午休"){ document.write("<td colspan='6' align='center'>"+arr[i][j]+"</td>") }else if(arr[i][j]=="休息"){ document.write("<td rowspan='9' align='center'>"+arr[i][j]+"</td>") }else{ document.write("<td>"+arr[i][j]+"</td>"); } } document.write("</tr>"); } document.write("</table>"); </script> </body> </html>
省际联动图片无缝隙滚动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <select id="prov" οnchange="getcity(this.value)"> <option value="">请选择</option> </select> <select id="city"> <option value="">请选择</option> </select> <script> var arr_prov=['湖北','湖南','河南','河北']; var arr_city=[['武汉','襄阳','十堰','宜昌'],['长沙','岳阳','常德','郴州'],['郑州','开封','洛阳','安阳'],['石家庄','沧州','邯郸','承德']]; var provobj=document.getElementById("prov"); for(i=0;i<arr_prov.length;i++){ var new_opt=document.createElement("option"); //循环创建option这个标签 new_opt.innerHTML=arr_prov[i]; //循环把数组输出到option这个标签 new_opt.value=i; //利用i的值0 1 2 3 当下标 与下面的城市对应 注意这个地方 provobj.appendChild(new_opt); //循环把这个标签添加到另一个标签中 } function getcity(val){ var cityobj1=document.getElementById("city"); cityobj1.length=1; //清空select市的内容 var new_city=arr_city[val]; alert(new_city); for(i=0;i<new_city.length;i++){ //这里注意数组的长度是如何定义的 var new_opt1=document.createElement("option"); new_opt1.innerHTML=new_city[i]; //因为上面已经把一维数组的下标定义了一个变量所以只用输出这个变量再加一个下标[i]就是二维数组的元素 //注意这里的意思是arr_city[val][i]不要写成arr_city[i] cityobj1.appendChild(new_opt1); } } </script> </body> </html> ========================
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>图片无缝隙滚动</title> <style> *{ margin:0; padding:0; } .div1{ width:1200px; height: 300px; border:1px solid red; margin:0 auto; overflow:hidden; } .div2{ width:2400px; height: 300px; margin:0 auto; } .ul1{ width:1200px; height: 300px; list-style:none; float: left; } .ul1 li{ width:300px; height: 300px; float: left; } </style> </head> <body οnlοad="start()"> <div class="div1" id="div1" οnmοusemοve="stop()" οnmοuseοut="start()"> <!-- 第一个盒子总盒子 --> <div class="div2" id="div2"> <!-- 第二个盒子设置图片溢出隐藏 --> <ul class="ul1" id="ul1"><!-- 第三个盒子装图片 --> <li><img src="images/1.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/2.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/3.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/4.jpg" width="300px" height="300px" alt=""></li> </ul> <ul class="ul1" id="ul2"><!-- 第三个盒子装图片 --> <li><img src="images/1.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/2.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/3.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/4.jpg" width="300px" height="300px" alt=""></li> </ul> </div> </div> <script> function autoplay(){ var div1=document.getElementById("div1"); var ul1=document.getElementById("ul1"); div1.scrollLeft+=2; if(div1.scrollLeft==div1.clientWidth){ div1.scrollLeft=0; } } var Time=null; function start(){ Time=window.setInterval("autoplay()",7); } function stop(){ window.clearInterval(Time); } </script> </body> </html> ========================
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>图片无缝隙滚动</title> <style> *{ margin:0; padding:0; } .div1{ width:1200px; height: 300px; border:1px solid red; margin:0 auto; overflow:hidden; } .div2{ width:2400px; height: 300px; margin:0 auto; } .ul1{ width:1200px; height: 300px; list-style:none; float: left; } .ul1 li{ width:300px; height: 300px; float: left; } </style> </head> <body οnlοad="start()"> <div class="div1" id="div1" οnmοusemοve="stop()" οnmοuseοut="start()"> <!-- 第一个盒子总盒子 --> <div class="div2" id="div2"> <!-- 第二个盒子设置图片溢出隐藏 --> <ul class="ul1" id="ul1"><!-- 第三个盒子装图片 --> <li><img src="images/1.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/2.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/3.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/4.jpg" width="300px" height="300px" alt=""></li> </ul> <ul class="ul1" id="ul2"><!-- 第三个盒子装图片 --> <li><img src="images/1.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/2.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/3.jpg" width="300px" height="300px" alt=""></li> <li><img src="images/4.jpg" width="300px" height="300px" alt=""></li> </ul> </div> </div> <script> function autoplay(){ var div1=document.getElementById("div1"); var ul1=document.getElementById("ul1"); div1.scrollLeft+=2; if(div1.scrollLeft==div1.clientWidth){ div1.scrollLeft=0; } } var Time=null; function start(){ Time=window.setInterval("autoplay()",7); } function stop(){ window.clearInterval(Time); } </script> </body> </html> ========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝隙滚动</title> <style> *{ margin:0px; padding:0px; } ul{ list-style:none; } #div1{ width:800px; height:300px; border:1px solid #000; margin:0 auto; overflow:hidden; } .bigdiv{ width:300%; height:300px; } #div1 ul{ float:left; } #div1 ul li{ float:left; } #div1 ul li img{ width:200px; height:300px; } </style> </head> <body οnlοad="starts()"> <div id="div1" οnmοuseοver="stops()" οnmοuseοut="starts()"> <div class="bigdiv"> <ul id="ul1"> <li><img src="images/Desert.jpg"/></li> <li><img src="images/Hydrangeas.jpg"/></li> <li><img src="images/Jellyfish - 副本.jpg"/></li> <li><img src="images/Lighthouse.jpg"/></li> </ul> <ul id="ul2"> </ul> </div> </div> <input type="button" value="移动" οnclick="marquee()"/> <script> var ul1=document.getElementById("ul1"); var ul2=document.getElementById("ul2"); ul2.innerHTML=ul1.innerHTML; var div1=document.getElementById("div1"); function marquee(){ if(ul2.offsetLeft-div1.offsetLeft-div1.scrollLeft<=0){ div1.scrollLeft-=ul2.offsetLeft-div1.offsetLeft; } div1.scrollLeft+=1; } var Time=null; function starts(){ Time= window.setInterval('marquee()',10); } function stops(){ window.clearInterval(Time); } </script> </body> </html>
========================
文档最后修改时间========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>文档最后修改时间</title> </head> <body> <script> document.writeln("文档最后修改于"+document.lastModified); //获取文档最后修改时间 //writen 表示在表达式后面加上换行符 var lastModObj=new Date(document.lastModified); alert(lastModObj.getMinutes()); //获取文档修改时间的分钟 </script> </body> </html>
文字选项卡========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>文字选项卡</title> <style> *{ margin: 0 ; padding:0 ; } .div1{ width: 500px; height: 300px; border:1px solid red; margin: 0 auto; } .ul{ width: 500px; height: 50px; border:1px solid green; list-style:none; } .ul li { float: left; width:150px; border:1px solid blue; height: 50px; } .ul1 { margin-left: 20px; } .ul1 li { margin-top: 10px; border-bottom:1px solid black; } </style> </head> <body> <div class="div1" id="div1"> <ul class="ul"> <li οnmοusemοve="change('ul1',this.id)" id="li1">点击排行</li> <li style="margin-left: 21px;" οnmοusemοve="change('ul2',this.id)" id="li2">观看排行</li> <li style="margin-left: 22px;" οnmοusemοve="change('ul3',this.id)" id="li3">分享排行</li> </ul> <ul class="ul1" id="ul1"> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> </ul> <ul style="display:none;margin-left: 20px;" class="ul1" id="ul2"> <li>白银案通缉犯画像专家:看完三麻袋案卷心都凉了</li> <li>白银案通缉犯画像专家:看完三麻袋案卷心都凉了</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>白银案通缉犯画像专家:看完三麻袋案卷心都凉了</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>白银案通缉犯画像专家:看完三麻袋案卷心都凉了</li> </ul> <ul style="display:none;" class="ul1" id="ul3"> <li>除了中央巡视外 还有12批督查组下到各省(名单)</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>除了中央巡视外 还有12批督查组下到各省(名单)</li> <li>台湾致死26人火烧车事件:司机或纵火自杀拒开门</li> <li>除了中央巡视外 还有12批督查组下到各省(名单)</li> </ul> </div> <script> function change(ulid,liid){ for(i=1;i<4;i++){ ulid1=document.getElementById("ul"+i); ulid1.style.display="none"; } ulid=document.getElementById(ulid); ulid.style.display="block"; for(k=1;k<4;k++){ var liid1=document.getElementById("li"+k); liid1.style.background="#fff"; } var liid=document.getElementById(liid); liid.style.background="#555"; } </script> </body> </html>
===============文字选项卡2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>网页标题</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> *{ margin:0px; padding:0px; } #d1{ border:1px solid red; width:500px; height:300px; } ul li{ list-style:none; float:left; width:98px; height:50px; text-align:center; line-height:50px; border:1px solid red; } ul{ height:50px; } #div1,#div2,#div3,#div4{ display:none; } #div1{ display:block; } </style> <script type="text/javascript"> function showDiv(n,m){ //把所有的div内容都得隐藏 for(var i=1;i<=4;i++){ var AllDiv = document.getElementById("div"+i); AllDiv.style.display="none"; } //把所有的li的边框显示 for(var j=1;j<=4;j++){ var AllLi = document.getElementById("li"+j); AllLi.style.border="1px solid red"; } //获取div对象 var obj = document.getElementById("div"+n); obj.style.display="block"; m.style.borderBottom="1px solid white"; } </script> </head> <body> <div id="d1"> <ul> <li id="li1" οnmοuseοver="showDiv(1,this)">国际新闻</li> <li id="li2" οnmοuseοver="showDiv(2,this)">国内新闻</li> <li id="li3" οnmοuseοver="showDiv(3,this)">体育新闻</li> <li id="li4" οnmοuseοver="showDiv(4,this)">娱乐新闻</li> <li></li> </ul> <div id="div1"> 国际新闻:<br /> 奥巴马据说又踹门了<br /> 越南,老挝,朝鲜,韩国,准备搞起来了 </div> <div id="div2"> 国内新闻:<br /> 某大大说:good good study,day,day,up<br /> 某些专家说:必须要good good study,day,day,up </div> <div id="div3"> 体育新闻:<br /> 据说,姚明,科比,詹姆斯签约中国男篮CBA<br /> 据说,大罗,小罗,小小罗,他们都来中国提求了 </div> <div id="div4"> 娱乐新闻:<br /> 某姐去美国了<br /> 李晨这个大黑牛和范冰冰搞对象 </div> </div> </body> </html>
限制文本字数========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>限制文本字数</title> </head> <body> <textarea name="text" id="text" cols="30" rows="5" οnkeyup="change()"></textarea> <p>您还将可以输入<span id="number"></span>个字符</p> <script type="text/javascript"> var number=document.getElementById("number"); var text=document.getElementById("text"); var i=200; number.innerHTML=i; function change(){ number.innerHTML=i-text.value.length; if(number.innerHTML<=0){ text.value=text.value.substr(0,200); number.innerHTML=0; } } </script> </body> </html>
直接三角形========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>直角三角形</title> </head> <body> <script> for(i=1;i<=9;i++){ for(j=1;j<=i;j++){ document.write("*"); } document.write("<br/>"); } </script> </body> </html>
正则表达式========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合验证</title> <style> *{ padding:0px; margin:0px; } html,body{ width:100%; height:100%; } ul{ list-style: none; } a{ color:black; text-decoration: none; } table{ margin:0px auto; } </style> <script> /* *函数名:check() *功能:检测用户注册表单的数据有效性 *参数:无 */ function check(){ //检测用户名是否为空 var user = document.getElementById("user"); if(user.value == ""){ alert("请输入用户名"); }else{ //检测用户名是否合法。3-18位的英文数字下划线,中文 var preg = /^((\w|[\u4e00-\u9fa5]){1,18})$/; var result = preg.test(user.value); if(result){ //检测密码是否为空 var pwd = document.getElementById("pwd"); var pwdMes = document.getElementById('pwdMes'); if(pwd.value == ""){ pwdMes.innerHTML = "请输入密码"; }else{ //检测密码是否合法 6-20 的任意字符 var pwdPreg =/^.{6,20}$/; var pwdRes = pwdPreg.test(pwd.value); if(pwdRes){ //判断强中弱,利用match的返回值 null var letter = /[a-z]/i var val = pwd.value; var a = val.match(letter); var number = /[0-9]/ var b = val.match(number); var specialCharacter = /[^A-Za-z0-9]/ var c = val.match(specialCharacter); if(a == null ||b==null ||c==null){ //判断中和弱 if ((a==null && b==null) || (a==null && c==null) || (b==null && c==null)) { pwdMes.innerHTML = "弱"; }else{ pwdMes.innerHTML = "中"; } }else{ pwdMes.innerHTML = "强" } //判断是否可以进行下一项 if(pwdMes.innerHTML != "*" && pwdMes.innerHTML.length == 1){ //判断确认密码 var pwd2 = document.getElementById('pwd2'); var pwd2Mes = document.getElementById('pwd2Mes'); //判断密码是否为空 if(pwd2.value == ""){ pwd2Mes.innerHTML = "请再次输入密码"; }else{ //判断两次密码是否一致 if(pwd2.value == pwd.value){ pwd2Mes.innerHTML = '√' //判断手机号码是否为空 var tel = document.getElementById('tel'); var telMes = document.getElementById('telMes'); if(tel.value == ""){ telMes.innerHTML = '请输入手机号码'; }else{ //判断手机号码是否合法 var telPreg = /^1(3|5|8|7|4)[0-9]{9}$/; var telRes = telPreg.test(tel.value); if(telRes){ telMes.innerHTML = '√'; //判断邮箱是否为空 var email = document.getElementById("email"); var emailMes = document.getElementById('emailMes'); if(email.value == ""){ emailMes.innerHTML= "请输入邮箱地址"; }else{ //判断邮箱地址是否合法 var emailPreg = /^\w{3,18}@\w{2,4}\.(com|COM|CN|cn)$/; var emailRes = emailPreg.test(email.value); if(emailRes){ emailMes.innerHTML = "√"; //判断家庭住址是否为空 var add = document.getElementById("add"); var addMes = document.getElementById('addMes'); if(add.value == ""){ addMes.innerHTML = '请输入家庭住址'; }else{ addMes.innerHTML = "√"; //提交 var form1 = document.getElementById('form1'); form1.submit(); } }else{ emailMes.innerHTML ='邮箱格式不正确,请输入正确的邮箱地址'; } } }else{ telMes.innerHTML = '请输入正确的手机号码'; } } }else{ pwd2Mes.innerHTML = "两次密码不一致"; } } } }else{ pwdMes.innerHTML ="密码格式不正确,密码为6-20位的任意字符。"; } } }else{ alert("用户名必须是3-18位的字母、数子、下划线组成"); } } } </script> </head> <body> <form action="js.php" id="form1" method="get"> <table border="1" width="500"> <tr> <th colspan="2">注册</th> </tr> <tr> <td>用户名:</td> <td><input id="user" name="user" /><span id="userMes"></span>*</td> </tr> <tr> <td>密 码:</td> <td><input id="pwd" name="pwd" type="password" /><span id="pwdMes">*</span></td> </tr> <tr> <td>确认密码:</td> <td><input id="pwd2" name="pwd2" type="password"/><span id="pwd2Mes">*</span></td> </tr> <tr> <td>性别:</td> <td><label><input type="radio" name="sex" value="男" checked />男</label><label><input type="radio" name="sex" value="女" />女</label></td> </tr> <tr> <td>出生年月:</td> <td> <select name="birthdayYear" id="birthday"> <option value="1990" selected>1990</option> <option value="1991">1991</option> <option value="1992">1992</option> </select>年 <select name="birthdayMonth" id="birthday"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> </select>月 <select name="birthdayDate" id="birthday"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> </select>日 </td> </tr> <tr> <td>手机号码:</td> <td> <input type="text" id="tel" name="tel" /><span id="telMes"></span> </td> </tr> <tr> <td>邮箱地址:</td> <td> <input type="text" id="email" name="email" /><span id="emailMes"></span> </td> </tr> <tr> <td>家庭地址:</td> <td> <input type="text" id="add" name="add" /><span id="addMes"></span> </td> </tr> <tr> <td></td> <td><input value="提交" type="button" οnclick="check()" /></td> </tr> </table> </form> </body> </html>
灯泡开关
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <img src="images/pic_bulboff.gif" id="myimage" οnclick="change()" width="200px" height="200px"> <script> function change(){ var myimage=document.getElementById("myimage"); if(myimage.src.match("bulbon")){ myimage.src="images/pic_bulboff.gif"; }else{ myimage.src="images/pic_bulbon.gif"; } } </script> </body> </html>
图片放大镜
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> #img1{ position:absolute; top: 30px; left: 30px; width: 400px; height: 200px; } #img2{ position:absolute; top: 30px; left: 450px; width: 400px; height: 200px; } #bigimg{ position:absolute; left: 20px; top:20px; width: 100px; height: 100px; border:1px solid red; display:none; } </style> <script> var img1,img2,bigimg; window.onload = function(){ img1 = document.getElementById("img1"); img2 = document.getElementById("img2"); bigimg = document.getElementById("bigimg"); img1.addEventListener("mouseover", function(){ bigimg.style.display="block"; var mouseX = event.clientX; //鼠标X轴距离 var mouseY = event.clientY;//鼠标Y轴距离 bigimg.style.left = mouseX+"px"; //交给放大镜 bigimg.style.top = mouseY+"px"; //交给放大镜 var rtop = mouseY-10-30; var rleft = rleft-10-50; var rwidth=rleft+100; var rheight = rtop+60; img2.style.clip="rect("+rtop+"px"+rwidth+"px"+rheight+"px"+rleft+"px)"; //图片剪裁 img2.style.zoom=2;//图片放大2倍 }, true); img1.addEventListener("mouseout", function(){ bigimg.style.display="none"; }, true); } </script> </head> <body> <img id="img1" src="img/2.jpg" alt=""> <img id="img2" src="img/2.jpg" alt=""> <div id="bigimg"></div> </body> </html>
图片局部剪裁
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .img1{ position:absolute;/* 必须设置绝对定位才能剪裁图片 */ left:200px; top:100px; } </style> <script> var i=0; window.onload = function(){ document.οnclick=function(){ var img1 = document.getElementById("img1"); img1.style.clip="rect(0px "+(i+1)*30+"px 130px "+i*10+"px"+")";/*点击一次图片剪切一次*/ i++; img1.style.left=200-i*20+"px";//原地剪裁 但是剪裁结束后还会继续移动 } } </script> </head> <body> <img id="img1" src="img/1.png" alt="" class="img1"> </body> </html>
标签页
========================<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> ul{ list-style:none; } .li{ /* 这是li都要的样式 */ float: left; padding:10px; cursor:pointer; } .chooseTab{ /* 选中时候的li样式 */ border-left:1px solid #000; border-top:1px solid #000; border-right:1px solid #000; background:#ffaadd; } </style> <script > var choosedTab; var mainLi; window.onload = function(){ var tabUl = document.getElementById("tab"); var tabLiArr = tabUl.getElementsByTagName("li");//得到的是一个数组 for(var i=0;i<tabLiArr.length;i++){ tabLiArr[i].addEventListener("click", function(){ dianTab(this); //表示当前触发的li }, false);//循环给数组里的li添加事件 用的是事件监听,false表示 不在捕获阶段响应 } choosedTab = tabLiArr[0]; //把第一个li交给这个变量 main = document.getElementById("mainLi"); }; function dianTab(thisa){ choosedTab.className="li";//触发点击事件后 第一个li的默认样式取消 thisa.className="li chooseTab"; //改变当前的li的样式 choosedTab = thisa; //把当前的li交给这个变量 main.innerHTML="vvvv"; } </script> </head> <body> <ul> <li style="height: 40px;"> <ul id="tab"> <li class="li chooseTab">好友</li> <li class="li ">商铺</li> <li class="li ">关注</li> </ul> </li> <li id="mainLi" style="width: 600px;height:400px;border: 1px solid red;"> aaaaaaa </li> </ul> </body> </html>
下拉列表
多物体运动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script > function dian(thisa){ var childUl = (thisa.parentElement.getElementsByTagName("ul"))[0]; //获取a 的父级元素,在获取标签名为"ul"的数组集合 第一个ul if(childUl.style.display==""){ childUl.style.display = "none"; }else{ childUl.style.display = ""; } //如果ul显示 则进入隐藏 如果隐藏 则显示 注意条件里面千万不要写block 否则要点击两次才能隐藏 } </script> </head> <body> <ul> <li><a href="#" οnclick="dian(this)"><b>+</b>我的关注</a> <!-- this表示这个链接 把这个链接传过去--> <ul style="display: none;"> <li><a href="#" οnclick="dian(this)"><b>+</b>我的好友</a> <ul style="display:none;"> <li>张三</li> <li>张三</li> <li>张三</li> </ul> </li> <li>我关注的商铺</li> <li>我关注的商品</li> <li>我留言的商品</li> </ul> </li> <li><a href="#" οnclick="dian(this)"><b>+</b>我的商铺</a> <ul style="display: none;"> <li>我的商品</li> <li>支付</li> <li>浏览记录</li> <li>购买</li> </ul> </li> </ul> </body> </html> ========================
图片遮罩层<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul { list-style:none; } li { width: 200px; height: 100px; background:yellow; margin-bottom: 20px; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> <!-- <script> window.οnlοad=function(){ var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].timer=null; //给每一个li都加一个变量 lis[i].οnmοuseοver=function(){//让每个li都触发这个事件 startMove(this,400); }; lis[i].οnmοuseοut=function(){ startMove(this,200); }; } }; function startMove(obj,itarget){ obj.timer=setInterval(function(){ clearInterval(obj.timer); var speed=(itarget-obj.offsetWidth); speed=speed>0?Math.ceil(speed):Math.floor(speed); //缓冲运动一定要取整 if(obj.offsetWidth==itarget){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30); } </script> --> </body> </html> ========================
左侧边栏滑出<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background:red; filter:alpha(opacity=30); /* IE的兼容 */ opacity: 0.3; } </style> <body> <div id="div1"></div> <script> window.οnlοad=function(){ var div1=document.getElementById("div1"); div1.οnmοuseοver=function(){ startMove(30); }; div1.οnmοuseοut=function(){ startMove(100); }; }; var timer=null; function startMove(itarget){ var div1=document.getElementById("div1"); clearInterval(timer); //清除计时器累加 timer=setInterval(function(){ div1.style.filter='alpha(opacity='+itarget+')'; div1.style.opacity=itarget/100; },30);//每30毫秒执行一次函数 } </script> </body> </html> ========================
侧边栏缓冲运动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> *{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background:red; position:relative; left:-200px; top: 0; } #share{ width: 20px; height: 50px; background:blue; position:absolute; left: 200px; top: 75px; } </style> </head> <body> <div id="div1"><span id="share">分享</span></div> <!-- <script> window.οnlοad=function(){ var odiv=document.getElementById("div1"); //页面加载事件 odiv.οnmοuseοver=function(){ //鼠标移入时执行函数 startMove(); //定义一个函数 } odiv.οnmοuseοut=function(){ startMove1(); //定义一个函数 } } var timer=null; //计时器等于空 function startMove(){ var odiv=document.getElementById("div1"); clearInterval(timer); //清除计时器累加 timer=setInterval(function(){ if(odiv.offsetLeft>=0){ //判断距离大于0 clearInterval(timer); //停止计时器 }else{ odiv.style.left=odiv.offsetLeft+20+"px"; } //设置左边距离每30毫秒加20px },30) } function startMove1(){ var odiv=document.getElementById("div1"); clearInterval(timer); //清除计时器累加 timer=setInterval(function(){ if(odiv.offsetLeft<=-200){ //判断距离小于-200 clearInterval(timer); //停止计时器 }else{ odiv.style.left=odiv.offsetLeft-20+"px"; } //设置左边距离每30毫秒减20px },30) } </script> --> <!-- 在上下两段代码很相似的情况下就用传参数的方式 传两个参数 <script> window.οnlοad=function(){ var odiv=document.getElementById("div1"); //页面加载事件 odiv.οnmοuseοver=function(){ //鼠标移入时执行函数 startMove(20,0); //设置参数 20速度 0目标位置 //定义一个函数 } odiv.οnmοuseοut=function(){ startMove(-20,-200); //设置参数 -20速度 -200目标位置 //定义一个函数 } } var timer=null; //计时器等于空 function startMove(speed,itarget){//speed 速度参数 itarget 目标值 var odiv=document.getElementById("div1"); clearInterval(timer); //清除计时器累加 timer=setInterval(function(){ if(odiv.offsetLeft==itarget){ //判断距离大于0 itarget 接受上面传过来的值 clearInterval(timer); //停止计时器 }else{ odiv.style.left=odiv.offsetLeft+speed+"px"; } //设置左边距离每30毫秒加20px speed接受上面传过来的值 },30) } </script> --> <!-- 在上下两段代码很相似的情况下就用传参数的方式 传一个参数--> <script> window.οnlοad=function(){ var odiv=document.getElementById("div1"); //页面加载事件 odiv.οnmοuseοver=function(){ //鼠标移入时执行函数 startMove(0); //设置一个参数 0目标位置 //定义一个函数 }; odiv.οnmοuseοut=function(){ startMove(-200); //设置一个参数 -200目标位置 //定义一个函数 }; }; var timer=null; //计时器等于空 function startMove(itarget){// itarget 目标值 var odiv=document.getElementById("div1"); clearInterval(timer); //清除计时器累加 timer=setInterval(function(){ var speed=0; if(odiv.offsetLeft>itarget){ speed=-20; //如果它的左边距大于传过来的目标值则说明盒子在外面 用负数 否则用正数 }else{ speed=20; } if(odiv.offsetLeft==itarget){ //判断距离大于0 itarget 接受上面传过来的值 clearInterval(timer); //停止计时器 }else{ odiv.style.left=odiv.offsetLeft+speed+"px"; } //设置左边距离每30毫秒加20px speed接受上面传过来的值 },30); } </script> </body> </html> ========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background:red;
position:relative;
left:-200px;
top: 0;
}
#share{
width: 20px;
height: 50px;
background:blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
<script>
window.οnlοad=function(){
var odiv=document.getElementById("div1");
//页面加载事件
odiv.οnmοuseοver=function(){
//鼠标移入时执行函数
startMove(0); //设置一个参数 0目标位置
//定义一个函数
};
odiv.οnmοuseοut=function(){
startMove(-200); //设置一个参数 -200目标位置
//定义一个函数
};
};
var timer=null; //计时器等于空
function startMove(itarget){// itarget 目标值
var odiv=document.getElementById("div1");
clearInterval(timer);
//清除计时器累加
timer=setInterval(function(){
var speed=(itarget-odiv.offsetLeft)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//缓冲效果 除以20以后 值越来越小 所以会越来越慢
//?表示那么 :表示否则 相当于简写的if判断
//Math.ceil 向上取整数 Math.floor向下取整数
if(odiv.offsetLeft==itarget){
//判断距离大于0 itarget 接受上面传过来的值
clearInterval(timer); //停止计时器
}else{
odiv.style.left=odiv.offsetLeft+speed+"px";
}
//设置左边距离每30毫秒加 speed接受上面传过来的值
},30);
}
</script>
</body>
</html>
========================
伸缩菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>指向li时宽度变大</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
font-size:14px;
}
a{
display: block;
text-decoration:none;
color: #333;
margin-left:1px;
background:#efefef;
width: 120px;
height: 30px;
/* -webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-ms-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
transition: width 0.5s ease; */ /* 第一种css3方法*/
}
.ul1{
list-style:none;
height: 30px;
border-bottom: 5px solid #f60;
}
li{
float: left;
text-align:center;
}
.on,a:hover{
background:green;
color: #fff;
/* width: 140px; */ /* 第一种方法里面的*/
}
</style>
</head>
<body>
<ul class="ul1">
<li><a href="" class="on">首页</a></li>
<li><a href="">新闻快讯</a></li>
<li><a href="">产品售后</a></li>
<li><a href="">联系我们</a></li>
</ul>
<script> //第二种方法js
window.οnlοad=function (){ //页面加载事件
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){ //循环遍历a
aA[i].οnmοuseοver=function (){ //设置a的鼠标悬浮事件
var This=this; /*把当前的this对象a设置变量*/
var Thistime=null; //设置变量为空 用来清除计时器
clearInterval(Thistime); //清除计时器
Thistime=setInterval(function (){ //启动计时器的函数
clearInterval(Thistime); //启动计时器
This.style.width=This.offsetWidth+8+"px"; /*a的宽度是它的宽度每次加8px*/
if(This.offsetWidth>=160){ //判断a大不大于160
clearInterval(Thistime);
}
},30);
};
aA[i].οnmοuseοut=function (){
var Thistime=null;
clearInterval(Thistime);
var This=this;
Thistime=setInterval(function (){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120){
This.style.width="120px";
clearInterval(Thistime);
}
},30);
};
}
};
</script>
<!-- <script>//第三种方法jquery
$(function(){ //文档就绪事件
$('a').hover(function() { //鼠标悬浮事件
$(this).stop().animate({"width":"160px"},300);//动画方法
}, function() { //鼠标离开后还原
$(this).stop().animate({"width":"120px"},300);
});
}); //.stop() 打开动画前清理前一个动画
</script> -->
</body>
</html>
========================
文字无缝隙滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上无缝滚动</title>
<style>
body {
font-size: 12px;
line-height: 24px;
text-algin: center; /* 页面内容居中 */
}
* {
margin: 0px;
padding: 0px; /* 去掉所有标签的marign和padding的值 */
}
ul {
list-style: none; /* 去掉ul标签默认的点样式 */
}
a img {
border: none; /* 超链接下,图片的边框 */
}
a {
color: #333;
text-decoration: none; /* 超链接样式 */
}
a:hover {
color: #ff0000;
}
#mooc {
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
margin: 50px auto 0;
text-align: left; /* 让新闻内容靠左 */
}
/* 头部样式 */
#moocTitle {
height: 62px;
overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */
font-size: 26px;
line-height: 62px;
padding-left: 30px;
background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
border: 1px solid ##f05e6f;
-moz-border-radius: 8px 8px 0 0; /* Gecko browsers */
-webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
border-radius: 8px 8px 0 0;
color: #fff;
position: relative;
}
#moocTitle a {
position: absolute;
right: 10px;
bottom: 10px;
display: inline;
color: #fff;
font-size: 12px;
line-height: 24px;
}
/* 底部样式 */
#moocBot {
width: 399px;
height: 10px;
overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc">
<!-- 头部 -->
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
<!-- 头部结束 -->
<!-- 中间 -->
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
<!-- 中间结束 -->
</div>
<!-- 慕课网课程公告结束 -->
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 50;
area.scrollTop = 0;
//最初始状态0
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
//如果滚动高度大于风雨它的本身高度
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var myScroll = setInterval("scrollUp()",speed);
//调用函数
area.onmouseover = function(){
clearInterval(myScroll);
}; //鼠标悬浮area停止计时器
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
};
</script>
</body>
</html>
========================
marquee滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML文字滚动效果</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
border:3px solid #ccc;
margin:50px auto 0;
padding:10px;
}
dl,dt{
list-style:none;
}
dl dt{
line-height:24px;
font-size:16px;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<div class="box">
<dl>
<dt>文字滚动示例(默认):</dt>
<dd><marquee>我默认向左滚。。。。。</marquee></dd>
<!-- 把要滚动的内容放在标签里面 -->
</dl>
<dl>
<dt>文字滚动示例(向右):</dt>
<dd><marquee direction="right" scrolldelay="500">我向右滚动。。。。</marquee></dd>
<!-- direction滚动方向 scrolldelay 设置活动字幕两次滚动之间的延迟时间-->
</dl>
<dl>
<dt>文字滚动示例(默认方向,滚动方式为alternate,循环3次,速度为2):</dt>
<dd><marquee scrollamount="2" behavior="alternate" loop="3">我来回滚动。。。。</marquee></dd>
<!-- scrollamount 设定活动字幕的滚动速度 behavior="alternate"滚动的方式
alternate :表示在两段来回滚动
scroll 由一端滚动到另一端 重复
slide 由一端滚动到另一端 不重复-->
</dl>
<dl>
<dt>文字滚动示例(向上,背景色为#CCFF66,设置了背景宽度和高度):</dt>
<dd><marquee direction="up" bgcolor="#CCFF66" width="250" height="55" οnmοuseοver="this.stop()" οnmοuseοut="this.start()">我在区域内滚动,向上哟。。。。</marquee></dd>
<!-- width="250" height="55" 内容滚动区域的宽和高-->
</dl>
</div>
</body>
</html>
========================
间隙性滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻无缝向上无缝滚动</title>
<style>
body {
font-size: 12px;
line-height: 24px;
text-algin: center; /* 页面内容居中 */
}
* {
margin: 0px;
padding: 0px; /* 去掉所有标签的marign和padding的值 */
}
ul {
list-style: none; /* 去掉ul标签默认的点样式 */
}
a img {
border: none; /* 超链接下,图片的边框 */
}
a {
color: #333;
text-decoration: none; /* 超链接样式 */
}
a:hover {
color: #ff0000;
}
#mooc {
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
margin: 50px auto 0;
text-align: left; /* 让新闻内容靠左 */
}
/* 头部样式 */
#moocTitle {
height: 62px;
overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */
font-size: 26px;
line-height: 62px;
padding-left: 30px;
background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
border: 1px solid ##f05e6f;
-moz-border-radius: 8px 8px 0 0; /* Gecko browsers */
-webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
border-radius: 8px 8px 0 0;
color: #fff;
position: relative;
}
#moocTitle a {
position: absolute;
right: 10px;
bottom: 10px;
display: inline;
color: #fff;
font-size: 12px;
line-height: 24px;
}
/* 底部样式 */
#moocBot {
width: 399px;
height: 10px;
overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc">
<!-- 头部 -->
<div id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </div>
<!-- 头部结束 -->
<!-- 中间 -->
<div id="moocBox">
<ul>
<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
</div>
<!-- 中间结束 -->
<!-- 底部 -->
<div id ="moocBot"> </div>
<!-- 底部结束 -->
</div>
<!-- 慕课网课程公告结束 -->
<script type="text/javascript">
var area = document.getElementById('moocBox');
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度
var time;
var delay= 2000;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll(){
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp(){
if(area.scrollTop % iliHeight==0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>
</body>
</html>