JavaScript实例学习笔记

JavaScript控制表单

遍历表单

1. 表单name.elements
   • 返回一个包含表单对象的集合
   • 通过console.log方式输出到控制台

访问表单元素

1. document.getElementsByName()
   • 返回一个包含所有符合该名称的集合
2. document.getElementById()
   • 根据id获取表单对象

动态修改表单控件的值

1. 文本框、按钮
   • 获取对象后 .value = “”
2. 下拉框
   • 获取对象后 .options.length可以获得到下拉框选项的数量
   • 获取对象后 .options[i].innerText = “” 修改选项文字

获取表单文本框数量

1. document.getElementsByTagName(“input”)

   • 返回一个集合，通过 .length可以获取对象数量

   • 获取所有input标签对象

2. el.type

   • 以字符串形式获得对象的type属性

修改表单的提交方式

1. 先通过 var dom = document.formname 获取表单DOM

2. var method = dom.selectname.value 获取下拉框的值

3. 令 dom.method = method 即可修改表单的提交方式

4. dom.submit() 提交表单

动态设置/获取焦点控件

获取对象后调用 .focus() 方法即可设置焦点控件

document.activeElement.id中保存在焦点控件的id

初始化表单所有控件

1. 初始化下拉框选项：获取下拉框对象后 .selectedIndex = 0;

2. 初始化日期

   // 创建一个当前日期对象
   var now = new Date();
   // 初始化日，如果小于9，前面补0
    var day = ("0" + now.getDate()).slice(-2);
   // TODO: 格式化月，如果小于9，前面补0
   var month = ("0" + (now.getMonth() + 1)).slice(-2);
   // TODO: 完整日期格式
   var today = now.getFullYear() + "-" + (month) + "-" + (day);
   document.getElementById("id-birth").value = today;
   

3. 初始化多选框：通过document.getElementsByName 获取多选框集合后遍历

   for (var i in checkHobby){
       checkHobby[i].checked = false;
   }
   

复选框全选、取消及判断是否选中

// 全选
function on_checkbox_all_click() {
    // TODO: checkbox
    var checkHobby = document.getElementsByName("hobby");
    for (var i in checkHobby)
        checkHobby[i].checked = true;
}

// 取消全选
function on_checkbox_none_click() {
    // TODO: checkbox
    var checkHobby = document.getElementsByName("hobby");
    for (var i in checkHobby)
        checkHobby[i].checked = false;
}

// 部分选择
function on_checkbox_sel_click() {
    // TODO: checkbox
    var bChecked = [true, false, true, true, false, true];
    var checkHobby = document.getElementsByName("hobby");
    for (var i in checkHobby)
        checkHobby[i].checked = bChecked[i];
}

// 判断是否选中
function on_checkbox_checked_click() {
    // TODO: checkbox
    var checkHobby = document.getElementsByName("hobby");
    for (var i = 0; i < checkHobby.length; i++) {
        if (checkHobby[i].checked == true)
            console.log(checkHobby[i].value + " is checked.");
        else
            console.log(checkHobby[i].value + " is not checked.");
    }
}

简单的数字及字符操作

getUpperCase = function (str, type) {//小写转大写
     type = type || "locale";//是否采取本地转换格式
     return type === "locale" && str.toLocaleUpperCase() || str.toUpperCase();//返回转换后的值
 };

getNumbers = function (s) {//字符型转换成数值型
    var n = parseInt(s, 10);//获取转换值
    if (isNaN(n)) return 0;//如果为NaN则转换结果为0
    return n;
};

getString = function (n) {//数字转换成字符型
    return n.toString();
};

高亮焦点控件

通过activeElement属性获取当前焦点控件，然后为其添加高亮显示的CSS样式代码

function highlight(thisid) {
    var frmEle = formHighlight.elements;
    var eleFocus = document.activeElement;
    for (var i=0; i<frmEle.length; i++) {
        if(frmEle[i].id == eleFocus.id) {
            console.log(frmEle[i].id);
            console.log(eleFocus.id);
            document.getElementById(thisid).style.border = "2px solid #666";
            document.getElementById(thisid).style.fontWeight = "bold";
            document.getElementById(thisid).style.color = "#fff";
            document.getElementById(thisid).style.backgroundColor = "#888";
        } else {
            console.log(frmEle[i].id);
            console.log(eleFocus.id);
            document.getElementById(frmEle[i].id).style.border = "";
            document.getElementById(frmEle[i].id).style.fontWeight = "";
            document.getElementById(frmEle[i].id).style.color = "";
            document.getElementById(frmEle[i].id).style.backgroundColor = "";
        }
    }
}

动态添加、删除下拉菜单

// 删除
function on_remove_opt_click(thisid) {
    var selHobby = document.getElementById("id-selHobby");
    selHobby.remove(selHobby.selectedIndex);
}
// 添加
function on_add_opt_click(thisid) {
    var selHobby = document.getElementById("id-selHobby");
    var option = document.createElement("option");
    option.value = document.getElementById("id-optValue").value;
    option.text = document.getElementById("id-optText").value;
    selHobby.add(option, null);
}

JavaScript控制DOM

遍历网页元素的全部属性

function on_get_attr() {
    var name = document.getElementById("id-name");
    var attrs = name.attributes;// 获取所有属性
    console.log("input name's all attributes --- ");
    for (var i = 0; i < attrs.length; i++) {
        console.log("attr name : " + attrs[i].name + ", value : " + attrs[i].value);
    }
}

动态创建网页新文本段落

// 动态创建文本段落
function on_createEle_p_new() {
    var id_div1 = document.getElementById("id-div1");
    var p1 = document.createElement("p");
    p1.innerText = "动态创建的文本段落.";
    id_div1.appendChild(p1);
}

// 动态追加文本段落
function on_createEle_p_append() {
    var id_div2 = document.getElementById("id-div2");
    var p2_2 = document.createElement("p");
    p2_2.innerText = "动态追加(appendChild)的文本段落.";
    id_div2.appendChild(p2_2);
}

// 动态插入文本段落
 function on_createEle_p_insert() {
     var id_div3 = document.getElementById("id-div3");
     var child_p = id_div3.children;
     var p3_1 = child_p[0];// 第一个子元素
     var p3_3 = child_p[1];// 第二个子元素
     var p3_2 = document.createElement("p");
     p3_2.innerText = "动态插入(insertAfter)的文本段落.";
     // 将p3_2插入到p3_3的前面
     id_div3.insertBefore(p3_2, p3_3);
 }

动态删除网页文本段落

// 删除一段文本段落
 function on_removeChild_p() {
     var id_div1 = document.getElementById("id-div1");
     var child_p = id_div1.childNodes;
     id_div1.removeChild(child_p[0]);
 }
// 删除所有文本段落
function on_removeChild_all_p() {
    var id_div3 = document.getElementById("id-div3");
    var child_p = id_div3.childNodes;
    for (var i = child_p.length - 1; i >= 0; i--) {
        id_div3.removeChild(child_p[i]);
    }
}

动态替换段落文本内容

1. innerText可以替换其中的文本内容
2. innerHTML则可以引入一段HTML代码

主动触发按钮单击事件

获取到按钮对象后 .click();

 document.getElementById("id-btn-name").click();

动态修改元素属性值

// 把属性对象从数组中获取出来后，调用其.value值更改属性值
function on_modify_attr() {
    var input = document.getElementsByTagName("input");
    var attrs = input[0].attributes;
    console.log("modify input's all attributes --- ");
    var new_attrs = ["password", "newCSS", "pwd", "id-pwd", "123456"];
    for (var i = 0; i < attrs.length; i++) {
        attrs[i].value = new_attrs[i];
    }
    for (var j = 0; j < attrs.length; j++) {
        console.log("attr name : " + attrs[j].name + ", value : " + attrs[j].value);
    }
}

获取下拉列表的选项

function on_get_selIndex() {
    // 获取当前选中的地址
    var i = document.getElementById("id-select-lang").selectedIndex;
    // 获取下拉框当前的选中对象
    var o = document.getElementById("id-select-lang").options[i];
    console.log("select index : " + i + "." + " select text : " + o.text);
}

按钮特效

<input type=“button”/>和<button></button>，前者浏览器兼容性更好（IE），后者在两个标签之间，设计人员可以防止文本、图像和多媒体等内容。

添加背景颜色

1. HTML DOM对象中，定义有一个Style对象，用于表示风格样式，绝大多数页面元素均可以通过该对象来定义风格样式。
2. Style对象中定义了一个backgroundColor属性，表示元素的背景颜色

// 将arrBtn的按钮背景颜色设置为红色
arrBtn.style.backgroundColor = “red”;

不同按钮提交到不同的表单地址

function submit_ch() {
    document.formMulti.action = "multiForm-ch.php";
    document.formMulti.submit();
}

禁用回车键提交表单

window.onload = function () {
    document.表单name.onkeypress = function (ev) {
        // 浏览器兼容写法
        var ev = window.event || ev;
        if (ev.keyCode == 13 || ev.which == 13) {
            console.log("Info : press enter no submit.");
            return false;
        }
    }
}

按钮单击后自动失效

// 点击后失效
document.getElementById("id-click-once").onclick = function (e) {
    e.target.disabled = true;
};
// 重新激活
document.getElementById("id-re-active").onclick = function (e) {
    document.getElementById("id-click-once").disabled = false;
};

为删除功能按钮添加确认提醒

document.getElementById("id-btn-confirm").onclick = function (e) {
    if(confirm("Please confirm to del ?")) {
        // 将p标签中的内容置空
        document.getElementsByTagName("p")[0].innerText = "";
    }
};

根据状态显示不同样式按钮

var curStatus = ""; // 状态标记
// 恢复正常状态
function on_normal_status() {
    var v_btn = document.getElementById('id-btn-status');
    v_btn.disabled = false;        //恢复可用状态
    v_btn.innerText = "正常状态";
    v_btn.style.color = "";
    v_btn.style.fontWeight = "";
    v_btn.style.backgroundColor = "";
    curStatus = '正常状态';         //设置正常状态显示值
    var p = document.getElementsByTagName("p")[0];
    p.innerHTML = '当前的状态：' + curStatus;
}

// 恢复停止状态
function on_stop_status() {
        var v_btn = document.getElementById('id-btn-status');
        v_btn.disabled = false;        //恢复可用状态
        v_btn.innerText = "停止状态";
        v_btn.style.color = "#888";
        v_btn.style.fontWeight = "bold";
        v_btn.style.backgroundColor = "#ccc";
        curStatus = '停止状态';            //设置停止状态显示值
        var p = document.getElementsByTagName("p")[0];
        p.innerHTML = '当前的状态：' + curStatus;
    }

按钮倒计时

DOM对象中定义的Window对象，该对象中拥有setInterval() 方法，可以按照指定的周期（以毫秒计）来调用函数或计算表达式。注意：setInterval方法会不断循环调用函数，直到使用clearInterval() 方法清除计时器或关闭当前窗口为止。

var btnRegTimer = null; //定时器

window.onload = function () {
    var v_btn = document.getElementById("id-btn-reg-timer");
    v_btn.disabled = true;
    v_btn.innerText = "注册（剩余10秒）";
    window.clearInterval(btnRegTimer);  //取消定时器
    var btnRegSec = 10;     //开始10秒倒计时
    btnRegTimer = window.setInterval(function () {
        if (btnRegSec == 0) {       //如果倒计时完了，则恢复按钮状态
            v_btn.disabled = false;
            v_btn.innerText = "注册";
            window.clearInterval(btnRegTimer);  //取消定时器
        } else {
            btnRegSec--;            //让倒计时秒数自减
            //设置倒计时状态显示值
            v_btn.innerText = "注册（剩余 " + btnRegSec + " 秒）";
        }
    }, 1000);
};

阅读完协议才可单击的按钮

通过监听文本域的onscroll滚动事件，并借助滚动高度属性（scrollHeight）来判断用户是否阅读完文本域中的用户协议，然后激活注册按钮

<!-- 添加文档主体内容 -->
<p>
    <textarea style="width:150px;height:120px;" readonly=true id="id-textarea-reg" onscroll="on_scroll_reg(this.id)">
		阅读完协议才可以单击的注册按钮阅读完协议才可以单击的注册按钮阅读完协议才可以单击的注册按钮阅读完协议才可以单击的注册按钮阅读完协议才可以单击的注册按钮阅读完协议才可以单击的注册按钮
    </textarea><br>
    <button id="id-btn-reg" disabled>用户注册</button>
</p>
</body>
<script type="text/javascript">
    function on_scroll_reg(thisid) {
        textareaReg = document.getElementById(thisid);
        if ((textareaReg.scrollTop + textareaReg.clientHeight) >= textareaReg.scrollHeight) {
            document.getElementById("id-btn-reg").disabled = false;
        }
    }
</script>

链接特效

带下划线的链接

通过设置链接DOM的style属性中的textDecoration为underline即可

function addLinkUnderline() {
    // TODO: 获取到所有的链接<a>
    var aLinks = document.getElementsByTagName("a");
    for (var i = 0; i < aLinks.length; i++) {   //遍历
        var link = aLinks[i];   //当前的链接DOM
        link.style.textDecoration = 'underline';    //设置下划线样式
    }
}

改变链接的click事件

在获取到DOM对象后，直接修改onclick属性指定一个方法 即可

window.onload = function () {
    var mLink = document.getElementById("id-m-link");
    mLink.onclick = function () {
        alert('超链接被点击了!');  //事件的内容逻辑
        return false;   //返回
    };
};

关闭窗口

在获取到DOM对象后，直接修改onclick属性指定一个方法，方法体为window.close()即可

var xLink = document.getElementById("id-x-link");
xLink.onclick = function() {
    window.close();     //关闭窗口
    return false;       //返回
};

用链接模拟一个按钮

在页面启动的时候将链接定义成按钮的样式，然后设定边框颜色来造成深浅效果用来模仿按钮

window.onload = function () {
    var linkBtn = document.getElementById("id-link-btn");
    // TODO: 链接定义成按钮式样式
    linkBtn.style.fontSize = '16px';    //字体
    linkBtn.style.textAlign = 'center'; //字符对齐
    linkBtn.style.color = 'white';      //颜色
    linkBtn.style.padding = '4px 10px'; //内距离
    linkBtn.style.margin = '3px';       //外边框
    linkBtn.style.background = 'gray';  //背景色
    linkBtn.style.textDecoration = 'none';  //文本样式
    // TODO: 边框颜色, 造成深浅效果来模仿按钮
    linkBtn.style.borderColor = '#EEEEEE #666 #666 #EEEEEE';
    linkBtn.style.borderStyle = 'solid';    //边框样式为实线
    linkBtn.style.borderWidth = '1px';      //边框的粗细
};

用链接替代表单提交按钮

模拟按钮样式后，设定点击提交方法

// 通过链接提交表单
function on_link_submit() {
    document.formLink.submit();  //TODO: 提交表单
}

动态修改一个链接的地址

获取DOM对象后修改href属性

function on_modify_url() {
    var mLink = document.getElementById("id-m-link");
    mLink.href = "#second-anchor";	// TODO: 修改链接的地址
}

让所有链接在新窗口打开

获取到DOM数组后遍历，设置链接的target属性

function modifyLinkTarget() {
    //获取到所有链接的DOM
    var linkDOMS = document.getElementsByTagName("a");
    for (var i = 0; i < linkDOMS.length; i++) {
        var link = linkDOMS[i];     //当前的链接DOM
        link.target = "_blank";     //在新窗口中打开
    }
}

让页面所有超链接失效

设置点击事件为null，并把地址改为什么都不做

function invaildLinks() {
    //获取到所有的链接的DOM
    var linkDOMS = document.getElementsByTagName("a");
    for (var i = 0; i < linkDOMS.length; i++) {
        var link = linkDOMS[i];     //当前的链接DOM
        link.onclick = null;		//把点击事件置空
        link.href = 'javascript:void(0)';   //地址改成什么都不做
    }
}

为链接地址新增一个参数

得到当前链接的地址后，判断是否已经有 ‘?’，如果有则直接拼 ‘&’，没有则拼 ‘?’

function addUrlParam() {
    //得到链接的DOM
    var links = document.getElementsByTagName('a');
    //遍历所有的链接
    for (var i = 0; i < links.length; i++) {
        var aHref = links[i]['href'];    //得到当前的链接地址
        //如果链接地址包含了问号，说明已经带有参数了
        if (aHref.indexOf('?') > 0) {
            //使用&符号串联更多的参数
            links[i]['href'] = href + '&tab=2';
        } else {
            //使用？来新加第一个参数
            links[i]['href'] = href + '?page=1';
        }
    }
}

返回页面顶部的链接

通过设置scrollTop的值为0实现，需要注意的是，对于HTML文档而言，是否定义DTD类型对于scrollTop属性的使用方法是不同的，compatModel属性可以用于判断HTML文档是否定义了DTD类型

function toPageTop() {
    // TODO: 通过修改document的scrollTop属性值来返回到页面顶部
    if(document.compatMode === "CSS1Compat") {
    document.documentElement.scrollTop = 0;
    } else if(document.compatMode === "BackCompat") {
    document.body.scrollTop = 0;
    } else {
    document.documentElement.scrollTop = 0;
    }
}

需要确认的超链接

function confirmOpen(link) {
    if (confirm('请您确认打开' + link + '网址吗?')) {
        return true;	// TODO: 返回true
    } else {
        return false;	// TODO: 返回false
    }
}

图片特效

图片比例缩放

var x = 1;  //当前的x
var y = 1;  //当前的y
function toScale(r) {   //改变尺寸的函数
    //获取DOM
    var img = document.getElementById('id-img-scale');
    if (r > 0) {    //向右
        x += 0.1;	//x坐标自加0.1
        y += 0.1;	//y坐标自加0.1
    } else {		//向左
        x -= 0.1;	//x坐标自减0.1
        y -= 0.1;	//y坐标自减0.1
    }
    var browser = getBrowser();// 通过userAgent判断使用的是何种浏览器，继而进行浏览器兼容
    if(browser = "FF") {
        img.style.transform = 'scale(' + x + ',' + y + ')';
    } else {
        img.style.WebkitTransform = 'scale(' + x + ',' + y + ')';
    }
}

图片放大镜特效

var smallBox = document.getElementById("smallBox"); // TODO：smallBox
var tool = document.getElementById("tool"); // TODO: tool
var bigBox = document.getElementById("bigBox"); // TODO: bigBox
var bigImg = document.getElementById("bigImg"); // TODO: bigImg
/**
* 鼠标进入smallBox区域内，显示tool区域和bigBox区域
*/
smallBox.onmouseenter = function () {
    tool.className = "tool active";
    bigBox.className = "big-box active";
};
/**
* 鼠标离开smallBox区域，不显示tool区域和bigBox区域
*/
smallBox.onmouseleave = function () {
    tool.className = "tool";
    bigBox.className = "big-box";
};
/**
* 鼠标在smallBox内移动
*/
smallBox.onmousemove = function (e) {
    var _e = window.event || e;//事件对象
    var x = _e.clientX - this.offsetLeft - tool.offsetWidth / 2;//事件对象在小盒子内的横向偏移量
    var y = _e.clientY - this.offsetTop - tool.offsetHeight / 2;//竖向偏移量
    if (x < 0) {
        x = 0;//当左偏移出小盒子时，设为0
    }
    if (y < 0) {
        y = 0;//当上偏移出小盒子时，设为0
    }
    // 通过窗口客户区坐标、相对偏移量和窗口客户区坐标计算出工具区相对小盒子的位置，并在大盒子中显示放大镜特效
    if (x > this.offsetWidth - tool.offsetWidth) {
        x = this.offsetWidth - tool.offsetWidth;//当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度
    }
    if (y > this.offsetHeight - tool.offsetHeight) {
        y = this.offsetHeight - tool.offsetHeight;//当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度
    }
    tool.style.left = x + "px";//黄色放大区域距离小盒子左偏距
    tool.style.top = y + "px";//黄色放大区域距离小盒子上偏距
    bigImg.style.left = -x * 2 + "px";//放大图片移动方向相反，偏移距离加倍
    bigImg.style.top = -y * 2 + "px";
};

图片在层里居中

获取图片尺寸并通过计算得出图片在父级层元素中的定位，实现图片在层里居中显示的效果

window.onload = function () {
    var imgCenter = document.getElementById('id-img');
    var width = imgCenter.width;
    var height = imgCenter.height;
    var divCenter = imgCenter.parentNode;
    var widthOffset = divCenter.offsetWidth;
    var heightOffset = divCenter.offsetHeight;
    imgCenter.style.margin = '0 auto';
    var padding = (heightOffset - height) / 2;
    divCenter.style.paddingTop = (32 + padding)+'px';
}

图片自适应框的大小

window.onload = function () {
    var img1 = document.getElementById('id-img1');
    adjsutImgFitDiv(img1);
    var img2 = document.getElementById('id-img2');
    adjsutImgFitDiv(img2);
};

/**
     * Adjust img to fit div
     * @param img
     */
function adjsutImgFitDiv(img) {
    var div = img.parentNode;
    var w = div.offsetWidth;
    var h = div.offsetHeight;
    // 注意尺寸的小幅修正量
    img.width = w - 2;
    img.height = h - 2;
}

为图片加上边框

/**
* 选择边框颜色
* @param thisid
*/
function on_sel_color_changed(thisid) {
    var selColor = document.getElementById(thisid);
    var color = selColor.value;
    var selWidth = document.getElementById('id-sel-width');
    var width = selWidth.value;
    setImageBorder(width, color);
}

/**
* 选择边框宽度
* @param thisid
*/
function on_sel_width_changed(thisid) {
    var selWidth = document.getElementById(thisid);
    var width = selWidth.value;
    var selColor = document.getElementById('id-sel-color');
    var color = selColor.value;
    setImageBorder(width, color);
}

/**
* 设置图片边框
* @param width
* @param color
*/
function setImageBorder(width, color) {
    var img = document.getElementById("id-img");
    // 判断边框设置值是否有效
    if(width == "0" || color == "none") {
        img.style.border = "";
    } else {
        img.style.border = width + 'px solid ' + color;
    }
}

显示局部图片

通过backgroundPosition属性修改定位点

var arr = [[0, 0], [-150, 0], [-150, -150], [0, -150]];// 局部图片定位坐标
var index = 0;

/**
* show image part
*/
function showImagePart() {
    var img = document.getElementById('id-div-img');
    index++;
    if (index == 4)
        index = 0;
    var x = arr[index][0] + 'px';
    var y = arr[index][1] + 'px';
    img.style.backgroundPosition = x + ' ' + y;
}

延迟加载图片

避免图片全部采用静态加载方式，通过自定义lazy_src属性暂存图片地址再赋值给src

<!-- 添加文档主体内容 -->
<div id="id-div-center">
    <img lazy_src="images/js-delay-load.jpg" src="" alt="图片正在加载..." id="id-img"/>
</div>

var timer = null;   // TODO: 计时器
// 加载事件
window.onload = function (ev) {
    timer = setTimeout(image_delay_load, 3000);
};
// 图片延迟加载
function image_delay_load() {
    var img = document.getElementById('id-img');
    img.src = img.attributes['lazy_src'].value;
    timer = null;
}

动态加载图片

点击按钮加载图片

function dynLoadImg(thisid) {
    var img = document.getElementById('id-img');
    img.src = img.attributes['lazy_src'].value;
}

重新加载验证码图片

通过自定义属性保存验证码路径，在js里面切换路径

<input type="button" value="重新加载验证码图片" onclick="reloadVerityCode(this.id);"/><br><br><br>
<img src="images/verifycode.01.jpg" alt="图片未加载" id="id-img"
     lazy_src_1="images/verifycode.01.jpg"
     lazy_src_2="images/verifycode.02.jpg"
     lazy_src_3="images/verifycode.03.jpg"
     />
<script type="text/javascript">
    var index = 1;
    
    function reloadVerityCode(thisid) {
        var img = document.getElementById('id-img');
        index++;
        if(index > 3)
            index = 1;
        img.src = img.attributes['lazy_src_' + index.toString()].value;
    }
</script>

文本框和下拉列表特效

只带下划线的文本框

通过设定style对象的border属性以实现

window.onload = function (ev) {
    var inputUnderline = document.getElementById("id-input-underline");
    inputUnderline.style.borderColor = 'black';     // TODO: 设置边框颜色
    inputUnderline.style.borderStyle = 'solid';     // TODO: 设置边框样式为实线
    inputUnderline.style.borderWidth = '0 0 1px 0'; // TODO: 设置边框大小，0代表无
};

用正则表达式验证email格式

html5规范中只需设置input标签的type属性为email即可

function validateEmail(thisid) {
    var inputResult = document.getElementById("id-input-result");   // TODO: 获得文本框的DOM
    var inputEmail = document.getElementById(thisid);   // TODO: 获得文本框的DOM
    var email = inputEmail.value;   // TODO: 获得用户输入的Email
    // TODO: 定义正则表达式
    var regexEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
    if (regexEmail.test(email)) {
        inputResult.value = "Email校验通过.";
    } else {
        inputResult.value = "Email校验失败,请检查输入格式.";
    }
}

首字母或全部字母大写

// 把所有字母大写
function allAlphabetUpper(thisid) {
    var allAlpha = document.getElementById(thisid);
    var valAll = allAlpha.value;
    var valNewAll = valAll.toUpperCase();
    allAlpha.value = valNewAll;
}
// 把首字母大写
function firstAlphabetUpper(thisid) {
    var firstAlpha = document.getElementById(thisid);
    var valFirst = firstAlpha.value;
    var firstUpper = valFirst.charAt(0).toUpperCase();
    var valNewFirst = firstUpper + valFirst.substr(1, valFirst.length);
    firstAlpha.value = valNewFirst;
}

只能输入数字的文本框

通过正则表达式实现对数字格式的验证

function validateNumber(thisid) {
    var inputResult = document.getElementById("id-input-result");
    var inputNum = document.getElementById(thisid);
    var valNum = inputNum.value;
    var regexNum = /\b[0-9]+\b/;
    if (regexNum.test(valNum)) {
        inputResult.value = "数字格式验证通过.";
    } else {
        inputResult.value = "数字格式验证未通过,只能输入数字.";
    }
}

判断字符的个数

用于“还可以输入xx字”的提示效果

// 计算字符
function countChar(thisid) {
    var vResult = document.getElementById("id-input-result");
    //获得文本框的DOM
    var vInput = document.getElementById(thisid);
    var vText = vInput.value;
    var sumTotal = 0, sumEn = 0, sumCh = 0;
    sumTotal = vText.length;
    for (var i = 0; i < sumTotal; i++) {
        var c = vText.charAt(i);
        if (isChineseChar(c)) {
            sumCh++;
        } else {
            sumEn++;
        }
    }
    vResult.value = "共计" + sumTotal + "个字符,汉字字符为" + sumCh + "个,非汉字字符为" + sumEn + "个.";
}
// 判断是否是中文字符
function isChineseChar(c) {
    var reg = /[\u4E00-\u9FA5]/;    // TODO: 定义正则表达式
    return reg.test(c);
}

校验电话号码格式

通过正则表达式校验

function validateTel(thisid) {
    var vResult = document.getElementById("id-input-result");
    var vTel = document.getElementById(thisid);
    var vTelVal = vTel.value;
    var regexTel = /^[(0-9)-]+$/;
    var regexMobile = /^1[3578]\d{9}$/;
    var regexTel1 = /^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/;
    var regexTel2 = /^\(0\d{2}\)\d{8}$|^\(0\d{3}\)\d{7}$/;
    if (regexTel.test(vTelVal)) {
        if (regexMobile.test(vTelVal)) {
            vResult.value = "正确的手机号码格式.";
        } else if (regexTel1.test(vTelVal) || regexTel2.test(vTelVal)) {
            vResult.value = "正确的固定电话号码格式.";
        } else {
            vResult.value = "电话号码格式不正确,请重新检查.";
        }
    } else {
        vResult.value = "电话号码格式不正确,请重新检查.";
    }
}

鼠标划过文本框改变其背景色

为文本框的onmouseover/onmouseout属性指定方法

window.onload = function (ev) {
    // TODO: 获取所有的文本框DOM
    var inputs = document.getElementsByTagName('input');
    // TODO: 遍历所有文本框
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];  // TODO: 当前文本框
        input.onmouseover = function () {
            this.style.backgroundColor = 'red'; // TODO: 修改背景色为红色
        };
        input.onmouseout = function () {
            this.style.backgroundColor = '';    // TODO: 恢复背景色
        };
    }
};

设置下拉列表框的值

// 初始化设置下拉列表框
window.onload = function (ev) {
    var idSel = document.getElementById('idSelSetColor');
    var arrRadio = document.getElementsByName("radioColor");
    for (let i = 0; i < arrRadio.length; i++) {
        if (arrRadio[i].checked) {
            idSel.value = arrRadio[i].value;
        }
    }
};
// 设置选择的值
function setSelValue(val) {
    var idSel = document.getElementById('idSelSetColor');
    idSel.value = val;
}

动态添加下拉列表框选项

<select name="selSetColor" id="idSelSetColor">
    <option>请选择...</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
</select>

<script type="text/javascript">
    function addColor(thisid) {
        var idSel = document.getElementById('idSelSetColor');
        var idSelVal = document.getElementById('id-sel-val');
        var idSelText = document.getElementById('id-sel-text');
        var val = idSelVal.value;
        var text = idSelText.value;
        idSel.options.add(new Option(val, text));
    }
</script>

动态删除下拉列表框选项

function removeColor(thisid) {
    var idSel = document.getElementById('idSelSetColor');
    idSel.options.remove(idSel.selectedIndex);
}
function removeAllColors(thisid) {
    var idSel = document.getElementById('idSelSetColor');
    idSel.options.length = 0;
}

二级联动下拉列表框

var country = [
    ["中国", "日本", "韩国"],
    ["英国", "德国", "法国"],
    ["美国", "巴西", "阿根廷"]
];

/**
* select country
*/
function sel_country() {
    // TODO: 获得大洲下拉选择框对象
    var selContinent = document.form2sel.continent;
    // TODO: 获得国家下拉选择框对象
    var selCountry = document.form2sel.country;
    // TODO: 获得大洲所对应的国家数组
    var arrContinentCountry = country[selContinent.selectedIndex - 1];
    // TODO: 清空国家下拉列表框,仅保留第一个选项
    selCountry.length = 1;
    // TODO: 将国家数组中的值填充到国家下拉列表框中
    for (var i = 0; i < arrContinentCountry.length; i++) {
        selCountry[i + 1] = new Option(arrContinentCountry[i], arrContinentCountry[i]);
    }
}

日期和时间特效

在标题栏显示当前日期

通过document.title对象修改标题栏显示内容

window.onload = function () {
    var date = new Date();
    document.title = date.toString();
};

根据时间动态显示标题欢迎词

判断时间设置问候语句

window.onload = function () {
    var date = new Date();
    document.getElementById("id-span-date").innerText = date.toString();
    var hour = date.getHours();
    if ((hour >= 0) && (hour < 6)) {
        document.title = "凌晨好!";
    } else if ((hour >= 6) && (hour < 8)) {
        document.title = "早晨好!";
    } else if ((hour >= 8) && (hour < 12)) {
        document.title = "上午好!";
    } else if ((hour >= 12) && (hour < 14)) {
        document.title = "中午好!";
    } else if ((hour >= 14) && (hour < 18)) {
        document.title = "下午好!";
    } else if ((hour >= 18) && (hour < 24)) {
        document.title = "晚上好!";
    } else {
        document.title = date.toString();
    }
};

根据月份动态显示背景

判断月份，注意js中的月份会比现实中少一月，修改图片src属性

window.onload = function () {
    var bgImage = document.getElementById("id-img-bg");
    var date = new Date();
    var month = date.getMonth() + 1;
    if ((month >= 1) && (month <= 12)) {
        bgImage.src = "images/calendar-" + month + ".jpg";
    }
};

判断今天是否为节假日

/**
 * get Holiday & Weekend
 * @param d
 * @returns {*}
 */
function getHolidayWeekend(d) {
    var vHolidayWeekend;
    var hMonth = d.getMonth() + 1;
    var hDate = d.getDate();
    var hDay = d.getDay();
    if (hDate == 1) {
        if (hMonth == 1) {
            vHolidayWeekend = "新年元旦";
        } else if (hMonth == 5) {
            vHolidayWeekend = "五一劳动节";
        } else if (hMonth == 10) {
            vHolidayWeekend = "十一国庆节";
        } else {
        }
    } else if ((hMonth == 3) && (hDate == 8)) {
        vHolidayWeekend = "三八妇女节";
    } else if ((hMonth == 4) && (hDate == 5)) {
        vHolidayWeekend = "清明节";
    } else if ((hMonth == 8) && (hDate == 15)) {
        vHolidayWeekend = "中秋节";
    } else {
        if(isWeekend(d)) {
            vHolidayWeekend = "周末(六日)";
        } else {
            vHolidayWeekend = "工作日";
        }
    }

    return vHolidayWeekend;
}

/**
 * get Weekend
 * @param d
 * @returns {boolean}
 */
function isWeekend(d) {
    var hDay = d.getDay();
    if ((hDay == 0) || (hDay == 6)) {
        return true;
    } else {
        return false;
    }

每秒刷新的时间展示效果

window.onload = function () {
    // TODO: 使用setInterval函数进行定时
    window.setInterval(function () {
        // TODO: 得到当前的时间对象
        var date = new Date();
        var str = '';     // TODO: 定义拼接的字符变量
        // TODO: 得到小时数
        str += date.getHours();
        str += ':';          // TODO: 拼接冒号
        // TODO: 得到分钟数
        str += date.getMinutes();
        str += ':';          // TODO: 拼接冒号
        // TODO: 得到秒数
        str += date.getSeconds();
        // TODO: 把结果显示出来
        document.getElementById('id-span-timer').innerHTML = str;
    }, 1000);   // TODO: 间隔为1秒
};

时间计时器

var iHours = 0;     // TODO: 定义小时的整数变量
var iMinutes = 0;   // TODO: 定义分钟的整数变量
var iSeconds = 0;   // TODO: 定义秒数的整数变量
var strHours = "00";    // TODO: 定义小时的字符变量
var strMinutes = "00";  // TODO: 定义分钟的字符变量
var strSeconds = "00";  // TODO: 定义秒数的字符变量
var strTimer;

window.onload = function (ev) {
    // TODO: 定义计时器拼接的字符变量
    strTimer = strHours + ":" + strMinutes + ":" + strSeconds;
    document.getElementById('id-span-start-timer').innerHTML = strTimer;
};
/**
 * start timer
 * @param thisid
 */
function start_timer(thisid) {
    // TODO: 使用setInterval函数进行定时
    window.setInterval(function () {
        iSeconds++;
        if(iSeconds==60){
            iSeconds = 0;
            iMinutes++;
            if(iMinutes==60){
                iMinutes = 0;
                iHours++;
            }
        } else{
            strSeconds = iSeconds.toString();
            if(strSeconds.length == 1)
                strSeconds = "0" + strSeconds;
            strMinutes = iMinutes.toString();
            if(strMinutes.length == 1)
                strMinutes = "0" + strMinutes;
            strHours = iHours.toString();
            if(strHours.length == 1)
                strHours = "0" + strHours;
        }
        strTimer = strHours + ":" + strMinutes + ":" + strSeconds;
        document.getElementById('id-span-start-timer').innerHTML = strTimer;
    }, 1000);   // TODO: 间隔为1秒
}

时间倒计时器

var iHours = 0;     // TODO: 定义小时的整数变量
var iMinutes = 0;   // TODO: 定义分钟的整数变量
var iSeconds = 0;   // TODO: 定义秒数的整数变量
var strHours = "00";    // TODO: 定义小时的字符变量
var strMinutes = "00";  // TODO: 定义分钟的字符变量
var strSeconds = "00";  // TODO: 定义秒数的字符变量
var strTimer;

window.onload = function (ev) {
    init_time();
    // TODO: 定义计时器拼接的字符变量
    strTimer = strHours + ":" + strMinutes + ":" + strSeconds;
    document.getElementById('id-span-count-down').innerHTML = strTimer;
};

/**
 * init time
 */
function init_time() {
    iMinutes = document.getElementById("id-input-init-time").value;
    strMinutes = iMinutes.toString();
    if (strMinutes.length == 1)
        strMinutes = "0" + strMinutes;
}

/**
 * start timer
 * @param thisid
 */
function count_down(thisid) {
    init_time();
    // TODO: 使用setInterval函数进行定时
    window.setInterval(function () {
        if (iSeconds == 0) {
            if (iMinutes > 0) {
                iMinutes--;
                strMinutes = iMinutes.toString();
                if (strMinutes.length == 1)
                    strMinutes = "0" + strMinutes;
                iSeconds = 60;
                iSeconds--;
                strSeconds = iSeconds.toString();
                if (strSeconds.length == 1)
                    strSeconds = "0" + strSeconds;
            } else if (iMinutes == 0) {
                strMinutes = "00";
            } else {
            }
        } else if (iSeconds > 0) {
            iSeconds--;
            strSeconds = iSeconds.toString();
            if (strSeconds.length == 1)
                strSeconds = "0" + strSeconds;
        } else {
        }
        strTimer = strHours + ":" + strMinutes + ":" + strSeconds;
        document.getElementById('id-span-count-down').innerHTML = strTimer;
    }, 1000);   // TODO: 间隔为1秒
}

计算时间差

/**
 * calculate time interval
 */
function calTimeInterval() {
    var time1 = document.getElementById('id-time-1').value;
    var time2 = document.getElementById('id-time-2').value;
    var t1 = parseTime(time1);
    var t2 = parseTime(time2);
    var span = t1.getTime() - t2.getTime();
    span = Math.abs(span / 1000);
    document.getElementById("id-time-interval").innerText = '两个时间相差 ' + span + ' 秒.';
}

/**
 * parse time
 * @param str
 * @returns {Date}
 */
function parseTime(str) {
    var date = str.split(' ')[0];
    var darr = date.split('-');
    var time = str.split(' ')[1];
    var tarr = time.split(':');
    var y = parseInt(darr[0]);
    var m = parseInt(darr[1]);
    var d = parseInt(darr[2]);
    var h = parseInt(tarr[0]);
    var mm = parseInt(tarr[1]);
    var s = parseInt(tarr[2]);
    return new Date(y, m, d, h, mm, s);
}

计算日期间隔

/**
 * calculate date interval
 */
function calDateInterval() {
    var time1 = document.getElementById('id-time-1').value;
    var time2 = document.getElementById('id-time-2').value;
    var t1 = parseTime(time1);
    var t2 = parseTime(time2);
    var span = t1.getTime() - t2.getTime();
    span = Math.abs(span / 1000);
    var d2d = parseDate(span);
    document.getElementById("id-date-interval").innerText = '两个日期间隔: ' + d2d + ' .';
}

/**
 * parse time
 * @param str
 * @returns {Date}
 */
function parseTime(str) {
    var date = str.split(' ')[0];
    var darr = date.split('-');
    var time = str.split(' ')[1];
    var tarr = time.split(':');
    var y = parseInt(darr[0]);
    var m = parseInt(darr[1]);
    var d = parseInt(darr[2]);
    var h = parseInt(tarr[0]);
    var mm = parseInt(tarr[1]);
    var s = parseInt(tarr[2]);
    return new Date(y, m, d, h, mm, s);
}

/**
 * parse date
 * @param sec
 * @returns {string}
 */
function parseDate(sec) {
    var seconds = sec % 60;
    var minutes = Math.floor(sec / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    var s = seconds;
    var m = minutes - hours * 60;
    var h = hours - days * 24;
    var d = days;

    return days + "天 " + h + "小时" + m + "分钟" + s + "秒";
}

网页标题体现月进度

window.onload = function () {
    var strTitle;
    var date = new Date();
    var d = date.getDate();
    if(d <= 10) {
        strTitle = '上旬，请安排好月计划';
    } else if(d > 10 && d <= 20) {
        strTitle = '中旬，请合理安排时间';
    } else if(d > 20) {
        strTitle = '下旬，请抓紧完成月计划';
    } else {
        strTitle = "";
    }
    document.title = strTitle;
    var today = date.toLocaleDateString();
    document.getElementById('id-span-date').innerText = "今天: " + today;
};

显示网页登录时间

var s = 0;  // TODO: 秒
var m = 0; // TODO: 分钟
var h = 0; // TODO: 小时
/**
 * window onload - login time
 */
window.onload = function () {
    window.setInterval(function () {
        s++;    // TODO: 秒+1
        if (s == 60) {  // TODO: 如果秒为60
            s = 0;  // TODO: 秒置零
            m += 1; // TODO: 分钟+1
        }
        if (m == 60) {  // TODO: 如果分钟为60
            m = 0;  // TODO: 分钟置零
            h += 1;    // TODO: 小时+1
        }
        var strLoginTime = "您已登录, 累计时间: " + h + " 时 " + m + " 分 " + s + " 秒.";
        document.getElementById('id-span-login-time').innerText = strLoginTime;
    }, 1000);
};

网页特效

打开新页面

有三种方法实现

• 直接使用超链接<a>
• 使用window对象的open方法
• 使用"javascript:open"脚本语言的方式

<a href="open.html">打开新页面</a><br><br>
<a href="open.html" target="_blank">打开新页面(target="_blank")</a><br><br>
<a onclick="window.open('open.html')">打开新页面(window.open)</a><br><br>
<input type="button"
       value="打开一个新的窗口(window.open)"
       onclick="window.open('open.html')"/><br><br>
<input type="button"
       value="打开一个新的窗口(function)"
       onclick="openNewHtml('open.html')"/><br><br>
<a href="javascript:openNewHtml('open.html')">打开新页面(javascript:function)</a><br><br>

打开指定大小的窗口

function openNewHtml(url) {
    var w, h;
    w = document.getElementById('id-window-width').value;
    if(w == 0)
        w = 100;
    h = document.getElementById('id-window-height').value;
    if(h == 0)
        h = 100;
    window.open(url, '', 'width=' + w + ',height=' + h);
}

获取打开子窗口的父窗口

window对象中的opener属性表示创建当前子窗口的window对象引用

// 当前页面url
var curUrl = window.location.href.split('?')[0];
document.getElementById('id-span-sub').innerHTML += "Current url: " + curUrl + "<br>";
// 父页面url
var openerHref = window.opener.location.href.split('?')[0];
document.getElementById('id-span-sub').innerHTML += "opener url: " + openerHref + "<br>";

父子窗口之间数据交互

父窗口：

<div id="id-div-center" style="">
    <label for="id-input-user">用户数据:&nbsp;&nbsp;</label><input type="text" id="id-input-user"><br><br>
    <input type="button" value="打开子窗口" onclick="openSubWindow('ch09-js-html-sub-sdata.html')"/><br><br>
    <span id="id-span-parent"></span>
</div>
</body>
<script type="text/javascript">
    /**
     * open sub window
     * @param url
     */
    function openSubWindow(url) {
        var subWin = window.open(url);
    }
</script>

子窗口：主要通过window.opener.document获取到父窗口的DOM对象后进行操作

<div id="id-div-center" style="">
    <span id="id-span-sub"></span><br>
    <label for="id-input-return">回传数据:&nbsp;&nbsp;</label><input type="text" id="id-input-return"><br><br>
    <input type="button" value="回传数据" onclick="returnData('id-input-return')"/><br><br>
</div>
</body>
<script type="text/javascript">
    /**
     * window onload - set date on title bar
     */
    window.onload = function () {
        var openerVal = window.opener.document.getElementById('id-input-user').value;
        document.getElementById('id-span-sub').innerHTML += "opener value: " + openerVal + "<br>";
    };

    /**
     * return data
     * @param id
     */
    function returnData(id) {
        var vReturnData = document.getElementById(id).value;
        window.opener.document.getElementById('id-input-user').value = vReturnData;
    }
</script>

刷新当前页面

使用DOM中的Location对象定义的reload()方法实现页面刷新

/**
 * 人工刷新页面
 */
function refreshManual() {
    var log = "manual refresh log : ";
    window.location.reload();
    var mdate = new Date();
    log += mdate.toLocaleString();
    console.log(log);
}

// TODO: define timer variables
var timer = null;
clearInterval(timer);

/**
 * 自动刷新页面
 */
function refreshAuto() {
    var log = "init log : ";
    var pdate = new Date();
    log += pdate.toLocaleString() + "\n";
    console.log(log);
    timer = self.setTimeout(function () {   // TODO: setTimeout
        window.location.reload();
        var adate = new Date();
        log += "auto refresh log : " + adate.toLocaleString() + "\n";
        console.log(log);
        clearTimeout(timer);
    }, 3000);
}

屏蔽鼠标右键

document.onmousedown = function (e) {
    // TODO: 判断事件的值是否为鼠标右键
    if (e.button == 2) {
        alert('禁用鼠标右键!');  // TODO: 提示用户禁用鼠标右键
    }
}

屏蔽上下文菜单

与屏蔽鼠标右键实现的效果相同，通过监听oncontextmenu实现

document.oncontextmenu = function (e) {
    e.returnValue = false;
};

屏蔽复制功能

在body标签通过监听oncopy事件来实现

<body oncopy="alert('禁止复制网页内容!');return false;"></body>

屏蔽选择操作

通过js直接屏蔽通过拖动鼠标选择，无法选择也就无法复制了

document.onselectstart = function (e) {
    e.returnValue = false;
};

防止网页被“frame”

防止自己的网页被无良程序员直接嵌套到他们的网站中。在js中加入一段代码，用于检测当前页面是不是顶层窗口，如果检测出不是顶层窗口，就通过脚本语言修改过来

window.onload = function () {
    // TODO: 判断有没有frame
    if (top.location != self.location) {
        alert("网页被‘frame’了!");
        top.location = self.location;
    } else {
        console.log("网页未被‘frame’!");
    }
};

隐藏页面滚动条

通过overflow属性来实现

<input type="radio" name="r-scrollbar" id="id-scrollbar-1" value="1" onclick="sbCheck(this.id)">允许页面滚动条&nbsp;&nbsp;
<input type="radio" name="r-scrollbar" id="id-scrollbar-0" value="0" onclick="sbCheck(this.id)">隐藏页面滚动条&nbsp;&nbsp;
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('id-scrollbar-1').checked = true;
    };

    function sbCheck(thisid) {
        var c = document.getElementById(thisid).value;
        switch (c) {
            case "0":
                // TODO: 隐藏且禁用横向纵向两个滚动条
                document.body.style.overflow = "hidden";
                break;
            case "1":
                // TODO: 开启横向纵向两个滚动条
                document.body.style.overflow = "auto";
                break;
            default:
                break;
        }
    }
</script>

最小化最大化和关闭窗口

var win;    // TODO: define global window obj

/**
 * open min window
 */
function window_min() {
    win = window.open("open.html", "", "_blank", "width=350,height=300");
    win.focus();
    var w = 1, h = 1;
    win.resizeTo(w, h);
}

/**
 * open max window
 */
function window_max() {
    win = window.open("open.html", "", "_blank", "width=350,height=300");
    win.focus();
    var w = 0, h = 0;
    w = window.screen.availWidth;
    console.log(w);
    h = window.screen.availHeight;
    console.log(h);
    win.moveTo(0, 0);
    win.resizeTo(w, h);
}

/**
 * close window
 */
function window_close() {
    win.focus();
    win.close();
}

脚本永不出错

若js脚本存在错误，那么页面在运行的时候可能会出现用户并不希望看到的提示脚本错误的弹出对话框，使用onerror事件来添加捕获错误的代码

window.onload = function (ev) {
    window.onerror = function (msg, url, line) {
        console.log(msg);
        console.log(url);
        console.log(line);
        // TODO: 屏蔽脚本错误提示
        return true;
    }
};

获取浏览器信息

使用navigator对象即可实现

window.onload = function () {
    var browser_info = "<b>浏览器主要信息:</b>" + "<br>";
    browser_info += "浏览器代码名称: " + navigator.appCodeName + "<br>";
    browser_info += "浏览器类型: " + navigator.appName + "<br>";
    browser_info += "浏览器内核: " + navigator.userAgent + "<br>";
    browser_info += "浏览器版本: " + navigator.appVersion + "<br>";
    browser_info += "浏览器语言: " + navigator.language + "<br><br>";
    browser_info += "<b>浏览器全部信息:</b>" + "<br>";
    // TODO: 遍历所有的navigator浏览器对象数据,选区其中提供基本字符数据的
    for (var n in navigator) {
        if (typeof navigator[n] == "string")
            browser_info += n + " : " + navigator[n] + "<br>";
    }
    document.getElementById("id-span-browser-info").innerHTML = browser_info;
};

获取浏览器窗口尺寸

window.onload = function () {
    var s_info = "<b>浏览器窗口尺寸:</b>" + "<br><br>";
    var w_outer_size = getWindowOuterSize();
    s_info += "window.outerWidth: " + w_outer_size.width + " / " + "window.outerHeight: " + w_outer_size.height + "<br>";
    var w_inner_size = getWindowInnerSize();
    s_info += "window.innerWidth: " + w_inner_size.width + " / " + "window.innerHeight: " + w_inner_size.height + "<br><br>";
    document.getElementById("id-span-window-size").innerHTML = s_info;
};

/**
 * get window outer size
 * @returns {{width: number, height: number}}
 */
function getWindowOuterSize() {
    return {
        width: window.outerWidth,
        height: window.outerHeight
    };
}

/**
 * get window inner size
 * @returns {{width: number, height: number}}
 */
function getWindowInnerSize() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight
    };
}

屏蔽键盘功能键

window.onload = function (ev) {
    document.onkeydown = function (ev) {
        var event = ev || window.event;
        if (event.shiftKey) {
            alert("禁止按Shift键!");
            return false;
        } else if (event.ctrlKey) {
            alert("禁止按Ctrl键!");
            return false;
        } else if (event.altKey) {
            alert("禁止按Alt键!");
            return false;
        } else {}
        console.log(event.key);
    };
};

定时关闭页面

设定一个定时器，然后调用window对象的close方法

function set_time_close(id) {
    var t = document.getElementById(id).value;
    var timeClose = t || -1;
    if (timeClose != -1) {
        timer = setTimeout(function () {
            win = window.open('', '_self', '');
            win.close();
            timer.clearTimeout();
        }, timeClose);
    }
}

修改浏览器标题

通过修改document的title属性实现

document.title = new_title;

Ajax应用

创建XMLhttpRequest对象，首先需要检查浏览器兼容性，如果浏览器为ie7以下浏览器则需要创建ActiveXObject

创建XMLhttpRequest对象的语法为

var xhr = new XMLHttpRequest();

对于老版本的IE5和IE6则使用ActiveXObject对象来创建

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

编写浏览器兼容代码的格式为

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequrst();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    xhr = null;
}

xhr对象创建成功后就可以向服务器端发送异步请求并解析异步数据

if (xhr != null) {
    // 定义当异步请求发送到服务器后需要执行的响应任务
    xhr.onreadystatechange = on_state_change;
    // 定义异步请求的参数，规定了请求的类型、链接地址、true表示为异步处理请求
    xhr.open("GET|POST", url, true);
    xhr.send(null);
} else {
    // TODO:xhr对象为空
}

Ajax解析文本

var xhr = null; // TODO: define XMLHttpRequest Object

/**
 * load txt file by Ajax
 */
function ajax_load_txt_request() {
    if (window.XMLHttpRequest) {    // TODO: Chrome, Firefox, Opera, IE7+, Edge, etc.
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {  // TODO: IE5, IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xhr = null;
    }
    if (xhr != null) {
        xhr.onreadystatechange = on_state_change;
        xhr.open("GET", "ajax.txt", true);
        xhr.send(null);
    } else {
        console.log("Your browser does not support XMLHTTP.");
    }
}

/**
 * callback func
 */
function on_state_change() {
    // readyState属性为4表示响应内容解析完成
    if (xhr.readyState == 4) {
        // status属性值为200表示异步操作成功
        if (xhr.status == 200) {
            // responseText中的值为解析后获取的文本文件中的内容
            document.getElementById('id-span-ajax-txt').innerText = xhr.responseText;
        } else {
            console.log("Problem retrieving data:" + xhr.statusText);
        }
    }
}

Ajax解析XML

var xhr = null; // TODO: define XMLHttpRequest Object

/**
 * load txt file by Ajax
 */
function ajax_load_xml_request() {
    if (window.XMLHttpRequest) {    // TODO: Chrome, Firefox, Opera, IE7+, Edge, etc.
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {  // TODO: IE5, IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xhr = null;
    }
    if (xhr != null) {
        xhr.onreadystatechange = on_state_change;
        xhr.open("GET", "ajax.xml", true);
        xhr.send(null);
    } else {
        console.log("Your browser does not support XMLHTTP.");
    }
}

/**
 * callback func
 */
function on_state_change() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            // responseXML属性将解析XML文件的结果作为Document对象返回
            var xmlDoc = xhr.responseXML;
            var x = xmlDoc.documentElement.getElementsByTagName("WEB");
            var v = "<table border='1'><tr><th>Title</th><th>Address</th><th>Info</th></tr>";
            var len = x.length;
            var xx = "";
            for (let i = 0; i < len; i++) {
                v += "<tr>";
                xx = x[i].getElementsByTagName('TITLE');
                {
                    try {
                        v += "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    } catch (er) {
                        v += "<td> </td>";
                    }
                }
                xx = x[i].getElementsByTagName('ADDRESS');
                {
                    try {
                        v += "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    } catch (er) {
                        v += "<td> </td>";
                    }
                }
                xx = x[i].getElementsByTagName('INFO');
                {
                    try {
                        v += "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    } catch (er) {
                        v += "<td> </td>";
                    }
                }
                v += "</tr>";
            }
            v += "</table>";
            document.getElementById('id-div-ajax-xml').innerHTML = v;
        } else {
            console.log("Problem retrieving data:" + xhr.statusText);
        }
    }
}

Ajax解析JSON

var xhr = null; // TODO: define XMLHttpRequest Object

/**
 * load txt file by Ajax
 */
function ajax_load_json_request() {
    if (window.XMLHttpRequest) {    // TODO: Chrome, Firefox, Opera, IE7+, Edge, etc.
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {  // TODO: IE5, IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xhr = null;
    }
    if (xhr != null) {
        xhr.onreadystatechange = on_state_change;
        xhr.open("GET", "ajax.json", true);
        xhr.send(null);
    } else {
        console.log("Your browser does not support XMLHTTP.");
    }
}

/**
 * callback func
 */
function on_state_change() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            // 获取解析内容，保存为文本形式
            var jsonDoc = xhr.responseText;
            // 将文本转化为JSON对象
            var jsonObj = JSON.parse(jsonDoc);
            // 获取定义的web数组
            var jsonWeb = jsonObj.web;
            var len = jsonWeb.length;
            console.log(len);
            var v = "<table border='1'><tr><th>Title</th><th>Address</th><th>Info</th></tr>";
            for (let i = 0; i < len; i++) {
                v += "<tr>";
                {
                    try {
                        v += "<td>" + jsonWeb[i].title + "</td>";
                    } catch (err) {
                        v += "<td> </td>";
                    }
                }
                {
                    try {
                        v += "<td>" + jsonWeb[i].address + "</td>";
                    } catch (err) {
                        v += "<td> </td>";
                    }
                }
                {
                    try {
                        v += "<td>" + jsonWeb[i].info + "</td>";
                    } catch (err) {
                        v += "<td> </td>";
                    }
                }
                v += "</tr>";
            }
            v += "</table>";
            document.getElementById('id-div-ajax-json').innerHTML = v;
        } else {
            console.log("Problem retrieving data:" + xhr.statusText);
        }
    }
}