zoukankan      html  css  js  c++  java
  • js大图轮播和倒计时

    <!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 type="text/css">
    			*{
    				margin:0px auto;
    				padding:0px;
    				}
    			#d1,.t{
    				100%;
    				height:620px;
    				}
    			.t{
    				display:none;
    				}	
    			.dian{
    				float:left;
    				20px;
    				height:20px;
    				border-radius:50%;
    				border:1px solid #0F0;
    				background-color:#fff;
    				margin-left:10px;
    				position:relative;
    				top:-25px;
    				right:-550px;
    				}
    			#d2{
    				200px;
    				height:20px;
    				}			
            </style>
        </head>
            <div id="d1">
                <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/22.jpg" style="display:block;"/>
                <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/2222.jpg"/>
                <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/8888.jpg"/>
                <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/77777.jpg"/>
                <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/222222.jpg"/>
            </div>
            <div id="d2">
                <div class="dian" onclick="Tiao('0')" style="background-color:#c6f"></div>
                <div class="dian" onclick="Tiao('1')"></div>
                <div class="dian" onclick="Tiao('2')"></div>
                <div class="dian" onclick="Tiao('3')"></div>
                <div class="dian" onclick="Tiao('4')"></div>
            </div>
        <body>
        </body>
        <script type="text/javascript">
    		var sy=0
    		window.setInterval("Huan()",3000);
    		function Huan()
    		{
    			var t=document.getElementsByClassName("t")
    			sy++;
    			if(sy>=t.length)
    			{
    				sy=0;	
    			}
    			for(var i=0;i<t.length;i++)
    			{
    				t[i].style.display="none";	
    			}
    			t[sy].style.display="block";
    			
    			var dian=document.getElementsByClassName("dian");
    			for(var j=0;j<dian.length;j++)
    			{
    				dian[j].style.backgroundColor="#FFF";
    			}
    			dian[sy].style.backgroundColor="#c6f";
    		}
    		function Tiao(a)
    		{
    			sy=a;
    			var t=document.getElementsByClassName("t");
    			for(var i=0;i<t.length;i++)
    			{
    				t[i].style.display="none";	
    		    }
    			t[a].style.display="block";
    			var dian=document.getElementsByClassName("dian");
    			for(var j=0;j<dian.length;j++)
    			{
    				dian[j].style.backgroundColor="#fff";	
    			}
    			dian[a].style.backgroundColor="#c6f";	
    		}
        </script>
    </html>
    

     倒计时

      <body>
            <span id="shu">10</span>
            <input type="button" value="同意" disabled="disabled" id="anniu" />
        </body>
        <script type="text/javascript">
    		window.setInterval("Tiao()",1000);
    		//window.setTimeout("Tiao()",1000);
    		function Tiao()
    		{
    			var s = document.getElementById("shu");
    			//alert(s.innerHTML);	
    			var n =document.getElementById("anniu");
    			
    			if(parseInt(s.innerHTML)==0)
    			{
    				n.removeAttribute("disabled");
    			}
    			else
    			{
    				var x = parseInt(s.innerHTML)-1;
    				s.innerHTML = x;
    				//window.setTimeout("Tiao()",1000);		
    			}	
    		}
    	</script>	
    
  • 相关阅读:
    JMM简述
    spring简读
    Linux常用命令
    基于java的八大排序实现
    数据库事务说明
    BIO、NIO、AIO区别与联系
    ThreadLocal 是什么?有哪些使用场景?
    ConcurrentHashMap 和 Hashtable 比较,为什么推荐使用ConcurrentHashMap?
    sychronized设计原理
    MySQL索引详解
  • 原文地址:https://www.cnblogs.com/navyouth/p/8888063.html
Copyright © 2011-2022 走看看