js的一些小demo總結
阿新 • • 發佈：2019-01-01
1.日曆控制元件(下載My97DatePicker)
我自己的demo：
效果:<script language="javascript" type="text/javascript" src="__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>
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/img1.png" style = "display:block;width:880px;height: 320px;"alt="" />
<img class = "pic" src="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/84355036.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>B:
//程式碼不完整，只給出主要結構
<script type="text/javascript" src="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="__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>