1.第一题
某网页中,假设有一个按钮,请完成下列操作,需要考虑跨游览器的情况。
1.当把鼠标移到按钮上,按钮的颜色会发生变化,移走后消失;
2.假设按钮点击后发生动态的改变了网页的背景颜色,并且弹出游览器的版本信息;
3.假设按钮点击后默认操作是访问南林官网,现在需要将其行为阻止。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.njfu.edu.cn/" id="myLink">
<button id="myBtn">按钮</button>
</a>
<script>
let btn = document.getElementById("myBtn");
let handler = function(event){
switch(event.type){
case "mouseover":
event.target.style.backgroundColor = "lightblue";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
let handler2 = function(event) {
let appVersion = navigator.appVersion;
event.currentTarget.style.backgroundColor = "gray";
setTimeout(function() {
alert(appVersion);
}, 100); //背景颜色改变需要时间,防止在这期间alert阻塞JS,从而保证背景颜色先变,然后再alert
}
btn.onmouseover = handler;
btn.onmouseout = handler;
document.body.onclick = handler2;
//阻止默认跳转
let link = document.getElementById("myLink");
link.onclick = function(event){
event.preventDefault();
};
</script>
</body>
</html>
2.第二题
某网页用户注册页面,包含需要填写的内容:姓名(文本框),性别(选择按钮),出生年月日(文本框),身份证号码(文本框),手机号码(文本框)。
·使用自动对焦功能,针对后三个文本框,当输入完一个文本框,自动跳转到下一个文本框。
·需要考虑过滤输入,针对后三个文本框,对于非数字的输入,直接屏蔽。
·对于姓名文本框,需要对非法字符的提醒,包括:数字和标点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>注册</h3>
<form method="post" action="" id="myForm">
<label for="username">姓名:</label> <input type="text" name="username" id="username" onchange="checkInput(event)" required>
<br/>
<label for="username">性别:</label>
<input type="radio" name="sex" value="male" checked="checked" id="male" />
<label for="male">男</lable>
<input type="radio" name="sex" value="female" id="female" />
<label for="female">女</label>
<br />
<label for="birthDate">出生年月:</label> <input type="text" name="birthDate" id="birthDate" maxlength="8">
<br/>
<label for="idNumber">身份证号码:</label> <input type="text" name="idNumber" id="idNumber" maxlength="18">
<br/>
<label for="tel">手机号码:</label> <input type="text" name="tel" id="tel" maxlength="11">
<br/>
<button>提交</button>
</form>
<script>
// 自己封装EventUtil对象
let EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
// 自动对焦
(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
let target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength){
let form = target.form;
let len = form.elements.length;
for (let i=0; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
let textbox1 = document.getElementById("birthDate"),
textbox2 = document.getElementById("idNumber"),
textbox3 = document.getElementById("tel");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();
// 过滤输入
(function(){
function shieldNaN(event) {
event = EventUtil.getEvent(event);
let target = EventUtil.getTarget(event);
let charCode = EventUtil.getCharCode(event);
// 屏蔽非数字
if (!/\d/.test(String.fromCharCode(charCode))){
EventUtil.preventDefault(event);
}
}
let birthDate = document.getElementById("birthDate");
let idNumber = document.getElementById("idNumber");
let tel = document.getElementById("tel");
EventUtil.addHandler(birthDate, "keypress", shieldNaN);
EventUtil.addHandler(idNumber, "keypress", shieldNaN);
EventUtil.addHandler(tel, "keypress", shieldNaN);
})();
// 非法字符提醒
function checkInput(event) {
let text = event.target.value;
if(/\d/.test(text) || /[,|.|?|!|:|"|']/.test(text)) {
alert("请勿输入数字和标点!");
}
}
</script>
</body>
</html>
3.第三题
某网页中有个多项选框,选择用户熟练的编程语言,现选选择框内有:C,C++,Java,JavaScript,PHP五个选项,使用DOM方法完成以下操作:
1.实现多项选择。
2.添加两个选择:Python和Perl,并移除掉PHP。
3.将Python项移到Java之后。
4.添加一个多选框,把Java和Python移动到添加的多选框中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<label for="selLanguage">选择您熟悉的编程语言:</label>
<select name="selLanguage" id="selLanguage" size="5" multiple>
<option value=" C">C</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
</select>
<select name="selLanguage2" id="selLanguage2" size="5" multiple>
</select>
<br/><br/>
<button id="btn1">添加Python和Perl,并移除PHP</button>
<button id="btn2">将Python移到Java之后</button>
<button id="btn3">将Java和Python移到新增的多选框</button>
</div>
<script>
let EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
}
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let btn3 = document.getElementById("btn3");
// 添加Python和Perl,并移除PHP
EventUtil.addHandler(btn1, "click", function(event){
let selectbox = document.getElementById("selLanguage");
let newOption = new Option("Python", "Python");
selectbox.add(newOption, null);
let newOption2 = new Option("Perl", "Perl");
selectbox.add(newOption2,null);
selectbox.remove(4); // 移除PHP
});
// 将Python移到Java之后
EventUtil.addHandler(btn2, "click", function(event){
let selectbox = document.getElementById("selLanguage");
let textbox = document.getElementById("txtIndex");
let optionToMove = selectbox.options[4];
selectbox.insertBefore(optionToMove, selectbox.options[3]);
});
// 将Java和Python移到新增的多选框
(function(){
let btn3 = document.getElementById("btn3");
EventUtil.addHandler(btn3, "click", function(event){
let selectbox1 = document.getElementById("selLanguage"),
selectbox2 = document.getElementById("selLanguage2");
selectbox2.appendChild(selectbox1.options[2]);
selectbox2.appendChild(selectbox1.options[2]);
});
})();
</script>
</body>
</html>