js的一些小demo总结

来源：互联网发布：mysql连接忘记密码编辑：程序博客网时间：2024/05/11 03:51

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/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="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>

0 0