javascript例子

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量903 收藏 6
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36106235/article/details/53560921
版权
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>
========================


<!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>
========================

点击按钮放大div





<!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>
 


















                

        

        

    




    

      

        

            

              
                
                  qq_36106235
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS点击事件之电灯开关案例

				
			

			

				

					Java技术
				

				

					07-12
					
					1849
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>电灯开关</title>
		<script type="text/javascript">
			var flag = false;

			function run() {
			...

			
		

	



                

              
                



	

		

			

				
					
使用JavaScript调整灯泡开关并记录

				
			

			

				

					Ceremony_feeling的博客
				

				

					10-16
					
					175
					
				

			

		

		

			
				
使用JavaScript调整灯泡开关并记录
代码：



var imgs = [“open.png”,“close.png”] ;
var   getTime ="";
function c() {
var weaK ="";
document.getElementById(“image”).src = imgs[i];
if (i==0){
i = 1;
weaK ="—灯亮了！";
}els...

			
		

	



                


  
              

                


	

		

			

				
					
JavaScript简单实例

				
			

			

				

					Linda的博客
				

				

					07-24
					
					2万+
					
				

			

		

		

			
				
JavaScript (JS)是属于网络的脚本语言，目前被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。 
初学JS，将自己学习过程中的简单实例代码放在这里，由于以前写过html，所以初次接触JS并不陌生，方便以后的学习和工作，现将简单实例在此列出： 
一、简单实例： 
1、通过指定的id来访问HTML元素并修改其内容(按钮触发)： 
(1)代码<!DOCTY

			
		

	





	

		

			

				
					
Opencv Sift和Surf特征实现图像无缝拼接生成全景图像

					
热门推荐

				
			

			

				

					牧野的博客
				

				

					09-23
					
					5万+
					
				

			

		

		

			
				
环境： OpenCV2.4.13+VS2012



Sift和Surf算法实现两幅图像拼接的过程是一样的，主要分为4大部分：



1. 特征点提取和描述
2. 特征点配对，找到两幅图像中匹配点的位置
3. 通过配对点，生成变换矩阵，并对图像1应用变换矩阵生成对图像2的映射图像
4. 图像2拼接到映射图像上，完成拼接




过程1、2、3没啥好说的了，关键看看步骤4中的拼接部分。这里先...

			
		

	



		

			
		



	

		

			

				
					
简单的js开关灯效果（附图）

				
			

			

				

					蓝鸟的博客
				

				

					03-10
					
					1万+
					
				

			

		

		

			
				
js开关灯



点击图片关灯或开灯

function changeImage()
{
  var element=document.getElementById("lamp");
  if(element.src.match("on.gif"))
    element.src="images/off.gif";
  else
    element.src="images/on.gif";

			
		

	





	

		

			

				
					
JavaScript例子——计算

				
			

			

				

					03-01
				

			

		

		

			
				
这个“JavaScript例子——计算”很可能是提供了一些关于使用JavaScript进行计算的实例代码，帮助开发者理解如何利用JavaScript处理数学计算、逻辑运算或者更复杂的算法。  在JavaScript中，计算主要涉及以下几个方面...

			
		

	





	

		

			

				
					
JavaScript例子

				
			

			

				

					03-02
				

			

		

		

			
				
在这个“JavaScript例子”压缩包中，包含了一系列的示例，旨在帮助开发者深入理解和应用JavaScript的核心概念。下面将详细阐述这些例子中可能涉及的关键知识点：  1. **基础语法**：JavaScript的基础包括变量声明（`...

			
		

	





	

		

			

				
					
JavaScript特效——开关灯泡

				
			

			

				

					webbc的博客
				

				

					08-15
					
					5869
					
				

			

		

		

			
				
JavaScript特效非常炫，博主目前也正在学习，觉得挺有意思的。

			
		

	





	

		

			

				
					
开关按钮控制灯泡，JavaScript简单实现

				
			

			

				

					weixin_45748576的博客
				

				

					10-14
					
					1640
					
				

			

		

		

			
				
废话不多说，先上效果图

主要代码如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开关灯泡</title>
	</head>
	<script>		
		var imgs = ["0.png","1.png"];
	...

			
		

	





	

		

			

				
					
tensorflow 自定义训练——eager模式，附带数据集制作

				
			

			

				

					JohnLeeK的博客
				

				

					07-10
					
					942
					
				

			

		

		

			
				
在前边的博客中我使用了tensorflow中kears模块来搭建神经网络，然后使用集成好的方法来进行训练，如model.fit()，从最简洁、最快速的方面来实现了神经网络，但是集成好的api灵活性不够，而且训练耗时比eager模式要多，所以在这里我对自定义训练做一个简单介绍，使用的数据集来源kaggle，链接：，如果不能下载用这个百度网盘链接：https://pan.baidu.com/s/1bg2981NUwwNZmkcz0w5WLw，提取码：fp34。完整代码在我的github，觉得我写的不错的可以给个

			
		

	





	

		

			

				
					
js特效-开关灯泡

				
			

			

				

					douyuanjun001的博客
				

				

					03-06
					
					815
					
				

			

		

		

			
				
新建网页



     function toggle() {
      //window指定对象tese1赋值给变量test1
      var test1 = document.getElementById("test1");
      //检索src中，第一次出现on.gif检索on返回0执行off.gif，第二次检索返回-1执行else
      if (test1.src.in

			
		

	





	

		

			

				
					
【opencv+python】图像处理之二、几何变换(仿射与投影)的应用

				
			

			

				

					weixin_30484247的博客
				

				

					05-15
					
					1198
					
				

			

		

		

			
				
该系列文章为 OpenCV+Python Tutorials的学习笔记 
代码托管在Github 
转载请注明: http://blog.csdn.net/a352611/article/details/51418178   [三记的博客]

写在文章开始之前: 
关于几何变换,常见的资料都没有把数学原理部分讲透彻,基本都是照着课本说,导致我很多地方无法彻底理解.思前想后还是把...

			
		

	





	

		

			

				
					
LibreOffice的国内镜像安装地址和node.js国内快速下载网站

				
			

			

				

					小丁的博客
				

				

					07-08
					
					296
					
				

			

		

		

			
				
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/

			
		

	





	

		

			

				
					
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？

				
			

			

				

					Vinca@的博客
				

				

					07-08
					
					852
					
				

			

		

		

			
				
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。

			
		

	





	

		

			

				
					
vue-使用Worker实现多标签页共享一个WebSocket

				
			

			

				

					qq_43548590的博客
				

				

					07-08
					
					1136
					
				

			

		

		

			
				
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。

			
		

	





	

		

			

				
					
Vue 3集成krpano 全景图展示

				
			

			

				

					Mr丶GUO
				

				

					07-06
					
					420
					
				

			

		

		

			
				
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。

			
		

	





	

		

			

				
					
lightchart 和百度echarts 有什么区别, 各自优势是什么

				
			

			

				

					huanghm88的专栏
				

				

					07-08
					
					178
					
				

			

		

		

			
				
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。

			
		

	





	

		

			

				
					
Webkit简介以及工作流程

					
最新发布

				
			

			

				

					读心悦
				

				

					07-10
					
					221
					
				

			

		

		

			
				
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。

			
		

	





	

		

			

				
					
acrobat JavaScript 例子？

				
			

			

				

					04-01
				

			

		

		

			
				
以下是一个简单的Adobe Acrobat JavaScript示例，用于在打开PDF文档时显示欢迎消息：  ```javascript // 定义一个欢迎消息字符串 var welcomeMessage = "欢迎来到我的PDF文档！";  // 在文档打开时显示欢迎消息 this...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值