Category: 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

今天在表单中：

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

//校验 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({
          ...
        });

}

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

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

比如下面表单中的 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对象

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

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

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'); //给第一个元素设置颜色

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

调用方法操作：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);
	}
}

坑爹现场：

 $.ajax({
	url:"${APP_PATH}/emp",
	type:"POST",
	date:$("#empAddModal form").serialize(), 
	success:function(result){
	alert(result);
	}
});

应该要把date 改成 data，这个别忘记了。

补充：

JQuery提供的Ajax方法：

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

原生js实现Ajax方法：

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

参考：https://www.cnblogs.com/colima/p/5339227.html

在网页中：JavaScript代码中，我在字符串 “页，总”内部添加了一个 回车符号，导致 无法解析字符串了 ，需要记住一下。

//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
					"页，总共"+result.extend.pageInfo.pages+"页
					,总"+result.extend.pageInfo.total+"记录")
		}