javascript练手-简单日历实现

样式表:

<style>
.cld-cur{
color:#6ac13c;
border:1px solid #6ac13c;
background:#e9f8df;
}
</style>

网页布局:

<div id=calendar></div>

JavaScript代码

//判断闰年
function runNian(_year) {
    if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {
        return true;
    }
    else { return false; }
}
//判断某年某月的1号是星期几
function getFirstDay(_year,_month) {
    var allDay = 0, y = _year-1, i = 1;
    allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) + 1;
    for ( ; i<_month; i++) {
        switch (i) {
            case 1: allDay += 31; break;
            case 2: 
                if(runNian(_year)) { allDay += 29; }
                else { allDay += 28; }
                break;
            case 3: allDay += 31; break;
            case 4: allDay += 30; break;
            case 5: allDay += 31; break;
            case 6: allDay += 30; break;
            case 7: allDay += 31; break;
            case 8: allDay += 31; break;
            case 9: allDay += 30; break;
            case 10: allDay += 31; break;
            case 11: allDay += 30; break;
            case 12: allDay += 31; break;
        }
    }
    return allDay%7;
}
//显示日历
function showCalendar(_year,_month,_day,firstDay) {
    var i = 0,
        monthDay = 0,
        showStr = "",
        _classname = "",
        today = new Date();
        //月份的天数
    switch(_month) {
        case 1: monthDay = 31; break;
        case 2:
            if(runNian(_year)) { monthDay = 29; }
            else { monthDay = 28; }
            break;
        case 3: monthDay = 31; break;
        case 4: monthDay = 30; break;
        case 5: monthDay = 31; break;
        case 6: monthDay = 30; break;
        case 7: monthDay = 31; break;
        case 8: monthDay = 31; break;
        case 9: monthDay = 30; break;
        case 10: monthDay = 31; break;
        case 11: monthDay = 30; break;
        case 12: monthDay = 31; break;
    }

    //输出日历表格,这部分因结构而异
    showStr = "<table class='cld-w'><thead>";
    //日历头部
    showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre'>&lt;</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>" + _year + "年" + _month + "月" + _day + "日" + "</em><span class='cld-next'>&gt;</span></div></th></tr>";
    //日历星期
    showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
    showStr += "</thead><tbody><tr>";
    //当月第一天前的空格
    for (i=1; i<=firstDay; i++) {
        showStr += "<td></td>";
    }
    //显示当前月的天数
    for (i=1; i<=monthDay; i++) {
        //当日的日期
        if(_year === today.getFullYear() && _month === today.getMonth()+1 && i === today.getDate()) {
            _classname = "cld-cur"; 
        } 
        //当日之前的日期(这个判断是因为我有工作需求,就是要求之前的日期不能点击)
        else if(_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth()+1 && i < today.getDate()) ) {
            _classname = "cld-old";
        }
        //其他普通的日期
        else { _classname = "cld-day"; }
        //其他大于当月的月份的相同日期(为了让点击下一月的时候,相同的日期增加cld-cur类)
        if(_day === i && (_year > today.getFullYear() || _month > today.getMonth()+1)) { _classname = "cld-cur"; }
        //把日期存在对应的value       
        showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'>" + i + "</td>";

        firstDay = (firstDay+1)%7;
        if(firstDay === 0 && i !== monthDay) {
            showStr += "</tr><tr>";
        } 
    }
    
    //剩余的空格
    if(firstDay!==0) {
        for (i=firstDay; i<7; i++) {
            showStr += "<td></td>";
        }
    }
        
    showStr +="</tr></tbody></table>";
    //插入calendar的页面结构里
    calendar.innerHTML = showStr;
}
//显示年月日
function showDate(_year,_month,_day) {
    var date = "", firstDay = getFirstDay(_year,_month,_day);
    if(_day !== 0) {
        date = _year + "年" + _month + "月" +_day + "日";
    }
    else { date = "No Choose."; }
    document.getElementById("showDate").innerHTML = date; //日历头部显示
    showCalendar(_year,_month,_day,firstDay);         //调用日历显示函数
}
//上一月
function preMonth(_year,_month,_day) {
    if(_month == 1) { showDate(_year - 1,12,_day); }
    else { showDate(_year,_month - 1,_day); }
}
//下一月
function nextMonth(_year,_month,_day) {
    if(_month == 12) { showDate(_year + 1,1,_day); }
    else { showDate(_year,_month + 1,_day); }
}
//初始化
var calendar = document.createElement('div');
calendar.setAttribute('id','showCld');
document.getElementById("calendar").appendChild(calendar); //增加到你的calendar里

//获取当天的年月日    
var today = new Date();
var _year = today.getFullYear(),
    _month = today.getMonth() + 1,
    _day = today.getDate();
var firstDay = getFirstDay(_year,_month);

//显示日历
showCalendar(_year,_month,_day,firstDay);


//日历点击的事件委托(可以查查js冒泡的应用)
calendar.onclick = function(e) {
    var e = e || window.event;
    var target = e.srcElement || e.target;
//把日历的头部的年月日分割成数组,这里保存在其value属性上
    dayArr = document.getElementById('showDate').getAttribute('value').split('-');
    if (target) {
        //如果是可点击的日期
        if ( target.className === "cld-day" || target.className === "cld-cur" ) {
            dateArr = target.getAttribute('value').split('-');
            //减0是把字符串转化成数值类型,以下一样            
            showDate(dateArr[0]-0,dateArr[1]-0,dateArr[2]-0);
            calendar.className = "";
        } 
        //如果是上一月的点击
        else if ( target.className === "cld-pre" ) {
            preMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);
        }
        //如果是下一月的点击
        else if ( target.className === "cld-next" ) {
            nextMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);
        }
    }
};

参考自:https://www.cnblogs.com/xinghh/p/3499375.html

bootstrap踩坑-简单复制粘贴修改出bug花时间

在bootstrap中 ,新建了一个模态框表格:

知道显示模态框需要:

$("#empUpdateModal").modal({
	backdrop:"static"
});

但是忘记了,点击提交按钮时,需要自己关闭模态框:

//点击更新,更新员工信息
$("#emp_update_done_btn").click(function(){

//1、员工修改成功,需要关闭模态框。 
//下面这句话,之前一直忘记添加了,所以一直不知道为什么提交了,却不自动关闭模态框。思考并找了很长时间,对框架执行不熟悉
$("#empUpdateModal").modal("hide");

}

新建的模态框表格如下:

	<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工修改</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>    
    <div class="col-sm-9">
      <input type="text" readonly class="form-control-plaintext" id="empName_update_input_disable" name="empName" value="none">
    </div>
    
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_update_input" name="email" placeholder="[email protected]">
          <div class="invalid-feedback"> 邮箱输入错误。</div>
    </div>

  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_update_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_update_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_update_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_update_done_btn">更新</button>
      </div>
    </div>
  </div>
</div>

 

javascript原理-多事件响应时的执行流程

今天在表单中:

对一个输入框添加了邮箱格式校验:

//校验 email框
$("#email_update_input").change(function(){
	//校验表单
	validate_form_ele("#email_update_input",g_email_reg,g_email_valid,g_email_invalid_format)

console.log("变化方法---邮箱校验");
				
	});

同时在提交表单时:添加了事件

//点击更新,更新员工信息
$("#emp_update_done_btn").click(function(){
	
console.log("提交更新方法---邮箱校验");
		
	//验证邮箱是否合法
	if(!validate_form_ele("#email_update_input",g_email_reg,g_email_valid,g_email_invalid_format))
         return false;
			
	//2、发送ajax请求保存更新的员工数据
	$.ajax({
          ...
        });

}

 

经过测试,修改了邮箱表单并立刻提交时,会先后触发两个方法:
 变化方法—邮箱校验
 提交更新方法—邮箱校验

但是两个方法都打上断点并调试的时候,很奇怪,只调用了 变化方法—邮箱校验,没有调用   提交更新方法—邮箱校验  。所以网页没有进行提交更新。

javascript辨析-jQuery对象与DOM对象是不一样的

比如下面表单中的 id为name的对象,如何获取name对象的值呢?

  <form action="gbk-response/春节" method="get">
         <p>用户名:<input type="text" id="name"  name="name"/></p>
         <p>密码:<input type="password" id="pwd" name="pwd"/></p>
         <input type="submit" value="登录">
         <input type="button" value="ajax-get" id="ajax-get-btn"/>
         <input type="button" value="ajax-post" id="ajax-post-btn"/>

  </form>

方法一:利用jQuery方法:$("#name").val();
方法二:利用JQuery获取DOM,然后利用DOM的方法 $("#name")[0].value;


一、jQuery对象与DOM对象是不一样的

通过一个简单的例子,简单区分下jQuery对象与DOM对象:
<p id=”imooc”></p>
我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:“hello,world”,并且让文字颜色变成红色。

1、通过标准JavaScript处理:

var p = document.getElementById('imooc');
p.innerHTML = 'hello,world!';
p.style.color = 'red';

通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是DOM对象,通过DOM方法将自己的innerHTML与style属性处理文本与颜色。

2、jQuery的处理:

var $p = $('#imooc');
$p.html('hello,world').css('color','red');

通过$(‘#imooc’)方法会得到一个$p的jQuery对象,$p是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法,调用自己的方法html与css处理,得到的效果与标准的JavaScript处理结果是一致的。

二、jQuery对象转化成DOM对象

    jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery的同时也能混合JavaScript原生代码一起使用。通过jQuery生成的对象是一个做了包装处理的对象,如果要用jQuery对象自己的方法,就需要满足这个对象是通过jQuery生成的。 在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是操作的DOM元素,jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象?

1、利用数组下标的方式读取到jQuery中的DOM对象

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

用jQuery找到所有的div元素(3个),因为jQuery 对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象然后调用它style属性然修改第一个div元素的颜色。这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0

2、通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

三、DOM对象转化成jQuery对象

相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。
如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。
通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象,通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

 

参考:https://www.cnblogs.com/daisy-ramble/p/5553621.html

javascript踩坑-js中调用方法时忘记给方法添加括号

调用方法操作:validate_add_form 忘记添加() 了,坑爹啊 !!!

if(!validate_add_form){
	//校验有误,失败
	return false;
}

方法为:

//校验 添加员工信息 表单 合法性
function validate_add_form(){
	//拿到要校验的数据,使用正则表达式
			
	//1、校验用户信息
	//获取表单值
	var empName = $("#empName_add_input").val();  
	//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
	var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
	//校验正则表达式
	if(!regName.test(empName) ){
		// 弹窗校验 太丑 
		//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
		// $("#empName_add_input").addClass("is-invalid");
				
	        show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
		return false;
	}else{
		show_validate_msg("#empName_add_input","success","");
	}
		
	//2、校验邮箱信息
	var email = $("email_add_input").val();
	var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(emial)){
		// 弹窗校验 太丑 
		//alert("邮箱格式不正确");
		//$("#email_add_input").addClass("is-invalid");
				
		show_validate_msg("#email_add_input","error","邮箱格式不正确");
		return false;
        }else{
		show_validate_msg("#email_add_input","success","");
	}
		
	return true;
}
		
		
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
	//清除当前元素的校验状态
	$(ele).removeClass("is-invalid is-valid");
	$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
	if("success"==status){
		$(ele).addClass("is-valid");
		$(ele).next("div").addClass("valid-feedback").text(msg);
	}else if("error" == status){
		$(ele).addClass("is-invalid");
		$(ele).next("div").addClass("invalid-feedback").text(msg);
	}
}

 

 

jsp踩坑-代码被 注释了还能解析运行

在 jsp网页中:我写了下面这个调转,但是被注释了。

<body>
<!-- 
<jsp:forward page="/emps"></jsp:forward>   
 --> 
</body>

 后来没有想到,jsp页面居然仍可以直接跳转,以后要注意了。

在jsp中,采用<!–   –>注释代码:

1、浏览器还是会解析注释中的代码,

2、注释的代码对于用户是可见的。

所以应该采用<%–  –%>来注释代码。