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)" οnclick="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);" οnclick="js_method()"//方式二
href="javascript:;" οnclick="js_method()"//方式三
//参考http://blog.csdn.net/bbirdsky/article/details/8435503
6.js弹出浮层
A:弹出两秒后消失:
<button id="btn" οnclick="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="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>