js的一些小demo總結 -开发者知识库

js的一些小demo總結 -开发者知识库,第1张

1.日歷控件(下載My97DatePicker)

我自己的demo:

<script language="javascript" type="text/javascript" src="/img.php?pic=__PUBLIC__/admin/js/WdatePicker.js"></script>//引入日期控件的js
<div style="margin-top:20px">
時間:<input id="d4311" name="date1" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
至<input id="d4312" name="date2" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>
</div>
效果:

js的一些小demo總結 -开发者知识库,第2张

2.多選框的全選和取消全選:

<script type="text/javascript">  
function select_all(){ //全選     
	var inputs = document.getElementsByName("users[]");     
	for(var i=0;i<inputs.length;i  )     
	{     
	  if(inputs[i].getAttribute("type") == "checkbox")     
	  {     
		inputs[i].checked = true;     
	  }     
	}     
}    
function cancel_all(){ //取消全選     
	var inputs = document.getElementsByName("users[]");     
	for(var i=0;i<inputs.length;i  )     
	{     
	  if(inputs[i].getAttribute("type") == "checkbox")     
	  {     
		inputs[i].checked = false;     
	  }     
	}     
}  
</script>

3.js給表格添加行和刪除行
//增加一行
function addNewRow() 
{  
    
	var obj=document.getElementById('mytable');  //獲取表格對象
	var row=obj.insertRow(-1);  //在行末添加一行
	row.insertCell(0).innerHTML='<input name="item" value="this item"/>' ;    //添加行的第一單元格內容
	row.insertCell(1).innerHTML='<input name="content" value="this content"/>' ;//添加行的第二單元格內容
	row.insertCell(2).innerHTML='<a  style="" href="javascript:void(0)" onclick="removeRow(this)"> 刪除</a>' ;    //添加行的第三單元格內容
	try  {   comm_set_page_height();   }  
	catch (e)  {  } 
	
} 
//刪除行
function removeRow(mytable) 
{  
	if(confirm("你確定刪除嗎?"))  
	{   
		var obj=document.getElementById('filearea');  
		var n=mytable.parentNode.parentNode.rowIndex;   
		obj.deleteRow(n);  
	} 
} 

4.jQuery輪播:

//demo為輪播兩張圖片

<!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: 0;
		padding:0;
	}
	img{
		border:0px;
	}
	
	#main{
		width: 880px;
		height: 320px;
		margin:20px auto;
		border: 0px solid blue;
		position: relative;
	}
	#main .pic{
		position: absolute;
		left: 0;
		top:0;
		display: none;
	}
	#main .slid{
		width: 170px;
		height: 22px;
		position: absolute;
		top:211px;
		left: 500px;
	}
	#main .slid .con{
		width: 22px;
		height: 22px;
		background: #999999;
		border-radius: 11px;
		margin-left: 5px;
		font-size: 12px;
		color: #FFFFFF;
		font-weight: 400;
		line-height: 22px;
		text-align: center;
		float: left;
	}
	#main .download{
		position: absolute;
		top:50px;
		left: 650px;
	}
</style>

<script type="text/javascript" src = "jquery-1.7.2.min.js" > </script>
<script type="text/javascript">
	$(function(){
		c = 0;
		var timer;
		// 輪播函數
		function change(){
			c  ;
			if(c == 2){
				c = 0;
			}
			$("#main .pic").eq(c).show().siblings(".pic").hide();
			$("#main .slid .con").eq(c).css({"background":"#E4393C"}).siblings(".con").css({"background":"#999999"});
		}
		clearInterval(timer);
		timer = setInterval(change,2000);
		// 給圖片添加鼠標移入移出事件
		$("#main .pic").hover(function() {
			clearInterval(timer);
		}, function() {
			clearInterval(timer);
		 	timer = setInterval(change,2000);
		});
		// 給小圖標添加鼠標移入移出事件
		$("#main .slid .con").hover(function() {
			clearInterval(timer);
			 c = $(this).index();
			$("#main .pic").eq(c).show().siblings(".pic").hide();
			$("#main .slid .con").eq(c).css({"background":"#E4393C"}).siblings(".con").css({"background":"#999999"});
		}, function() {
			clearInterval(timer);
		 	timer = setInterval(change,2000);
		});
	})
</script>
</head>
<body>
	<div id="main">
		<img class = "pic" src="/img.php?pic=img/img1.png" style = "display:block;width:880px;height: 320px;"alt="" />
		<img class = "pic" src="/img.php?pic=img/img2.png" alt="" /  style="width:880px;height: 320px;">
		<div class = "slid">
			<div class="con" style ="background:#E4393C"><span>1</span></div>	
			<div class="con"><span>2</span></div>
		</div>
	</div>
</body>
</html>

5.A標簽執行js腳本

href="javascript:js_method();" //方式一
href="javascript:void(0);" onclick="js_method()"//方式二
href="javascript:;" onclick="js_method()"//方式三
//參考http://blog.csdn.net/bbirdsky/article/details/8435503

6.js彈出浮層

A:彈出兩秒后消失:

<button id="btn" onclick="func()">btn</button>
<script>
var layer=document.createElement("div");
layer.id="layer";
function func()
{
    var style=
    {
        background:"#f00",
        position:"absolute",
        zIndex:10,
        width:"200px",
        height:"200px",
        left:"200px",
        top:"200px"
    }
    for(var i in style)
        layer.style[i]=style[i];   
    if(document.getElementById("layer")==null)
    {
        document.body.appendChild(layer);
        setTimeout("document.body.removeChild(layer)",2000)
    }
}
 
</script>
參考:http://zhidao.baidu.com/link?url=rzxIKE8T2TNx1TygN_SKT67kUPOesgjgrU5Ky_jJq9W6oKGAqsZXS_mB8FOk0uKbjugyzgMrAdT4eIP75S0bUq
B:

//代碼不完整,只給出主要結構
<script type="text/javascript" src="/img.php?pic=js/jquery.js"></script>
<style type="text/css">
.showdiv{padding:2px 2px;text-align:center;background:#94B738;display:block;width:43px;position:absolute;z-index:3}
.showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:0px #8FA4F5 solid;}
.toast{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:5;border:0px #8FA4F5 solid;padding:1px;}
</style>
<a class="showdiv" href="javascript:void(0);">彈浮層</a>
<div class="showbox" >
//兩個div內容省略
<img  src="/img.php?pic=__PUBLIC__/Index/images/close.png" class="close">
<a class="gettask">確認接任務</a>
<div class="toast"></div>	
</div>
<div id="zhezhao"></div>//掩層	
<script type="text/javascript">
$(document).ready(function(){
	$(".showdiv").click(function(){
		var box =300;
		var th= $(window).scrollTop() $(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$(".showbox").animate({top:th,opacity:'show',width:600,height:400,right:rw},500);
		$("#zhezhao").css({//掩層	
			display:"block",height:$(document).height()
		});
	   document.body.appendChild(newMask);
		return false;
	});
	$(".showbox .close").click(function(){
		$(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		$("#zhezhao").css("display","none");
		document.body.removeChild(docEle(m));
	});
	$(".showbox .gettask").click(function(){
		var box =350;
		var th= $(window).scrollTop() $(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$(".toast").animate({top:th,opacity:'show',width:200,height:100,right:rw},500);
		$("#zhezhao").css({
			display:"block",height:$(document).height()
		});
		return false;
	});
});
</script>




最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复