JS實例3

時間 2019-11-17

原文原文鏈接

        window.setInterval("Time()",1);
    	function Time()
		{
			var date = new Date();//當前時間函數
			var n = date.getFullYear();//年
			var y = date.getMonth()+1;//月注意+1
			var r = date.getDate();//日
			var x = date.getHours();//時
			var f = date.getMinutes();//分
			var m = date.getSeconds();//秒
			var h = date.getMilliseconds() //獲取毫秒
			var str = "當前時間："+n+"年"+y+"月"+r+"日"+x+":"+f+":"+m+":"+h;//字符串拼接
			document.getElementById("date").innerHTML = str;//效果和/*date=document.getElementById("date");
                        date.innerHTML = str*/同樣    
		}

二javascript

第一步先佈局一個大div而後在裏面佈局三個小div而後作一個下拉列表css

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>無標題文檔</title>
        <style type="text/css">
        	*{
				margin:0px auto;
				padding:0px;
				}
			#wai{
				width:500px;
				height:500px;
				}
			#zuo{
				float:left;
				width:200px;
				height:500px;
				}
			#zhong{
				float:left;
				width:100px;
				height:500px;
				}
			#you{
				float:left;
				width:200px;
				height:500px;
				}
        </style>
    </head>
    
    <body>
        <div id="wai">
        	<div id="zuo">
            	<select multiple="multiple" id="znr" style="width:200px; height:200px;">
                	<option value="山東">山東</option>
                    <option value="淄博">淄博</option>
                    <option value="張店">張店</option>
                </select>
            </div>
            <div id="zhong">
            	<div style="margin-left:25px; margin-top:20px;"><input type="button" value=">>" style="width:50px;"  /></div>
                <div style="margin-left:25px; margin-top:20px;"><input type="button" value=">" style="width:50px;" /></div>
            </div>
            <div id="you">
            	<select id="ynr" multiple="multiple" style="width:200px; height:200px;"> 
                </select>
            </div>
        </div>
        
    </body>

加點擊事件onclickhtml

<div style="margin-left:25px; margin-top:20px;"><input type="button" value=">>" style="width:50px;" onclick="Moveall()" /></div>
<div style="margin-left:25px; margin-top:20px;"><input type="button" value=">" style="width:50px;" onclick="Moveone()"/></div>

先作第二個一個一個選擇的java

		function Moveone()
		{
			var left = document.getElementById("znr");//獲取id的元素
			var right = document.getElementById("ynr");
			var lz = left.value;//獲取value屬性
			var str;//定義變量
			str ="<option value='"+lz+"'>"+lz+"</option>";//字符串拼接
			var bs=0;//隨便設置
			for(var i=0;i<right.childNodes.length;i++)
			{
				if(right.childNodes.item(i).text == lz)
				//right.childNodes.item(i).text=select下子元素裏每一個索引對應的文本
				{
					bs = 1;//只要不等於0就行	
				}
			}
			if(bs==0)
			{
				right.innerHTML = right.innerHTML+str;//		
			}	
		}

複選的函數

		function Moveall()
		{
			var left = document.getElementById("znr");
			var right = document.getElementById("ynr");
			
			right.innerHTML = left.innerHTML;	
		}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。