javascript练习
作者：互联网
javascript简单练习
验证邮箱是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<title>js-DOM编程-正则表达式验证登陆邮箱</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
span{
font-size: 12px;
}
</style>
</head>
<body>
<!--
需求:
1. 点击提交按钮，首先验证是否填写邮箱，未填写则给出警告(红色)
2. 如果已经填写，正则表达式验证文本框里的邮箱地址是否合法
3. 不合法则给出非法提示(红色)，合法则给出合法提示(绿色)
4. 再次聚焦文本框时，提示字样消失
-->
<script>
window.onload = function (){
//获取按钮对象
var btn = document.getElementById("btn");
//获取提示span对象
var sp = document.getElementById("sp");
//获取输入文本框对象
var email = document.getElementById("email");
//为验证按钮绑定点击事件
btn.onclick = function (){
var emailData = email.value;
if(!emailData){
sp.innerHTML = "<font color='red'>请先填写邮箱，再验证</font>";
return;
}
//创建正则表达式对象
var regEpr = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//调用正则表达式对象的test方法进行字符串格式验证
var checkResult = regEpr.test(emailData);
if(!checkResult){
sp.innerHTML = "<font color='red'>非法格式</font>";
}else{
sp.innerHTML = "<font color='green'>通过验证</font>";
}
}
//为输入文本框绑定聚焦事件
email.onfocus = function (){
sp.innerText = "";
}
}
</script>
<input type="text" id="email"><span id="sp"></span><br>
<input type="button" id="btn" value="验证">
</body>
</html>
简单的表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>实现简单表单验证:js + 正则表达式</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
span{
font-size: 12px;
}
</style>
</head>
<body>
<script>
window.onload = function (){
//获取各个节点对象
var name = document.getElementById("uname");
var passwd1 = document.getElementById("passwd1");
var passwd2 = document.getElementById("passwd2");
var btn = document.getElementById("sub-btn");
var uname_sp = document.getElementById("uname-sp");
var pwd_sp1 = document.getElementById("pwd-sp1");
var pwd_sp2 = document.getElementById("pwd-sp2");
var btn_sp = document.getElementById("btn-sp");
var userform = document.getElementById("userform");
//获取邮箱提示span对象
var sp = document.getElementById("sp");
//获取输入文本框对象
var email = document.getElementById("email");
//提交依据,各项都通过验证才可以正常提交
var flag = [];
/*
表单验证的相关需求:
验证原则:
1. 写完一项，验证一项(失去焦点验证)
2. 红色警示和绿色通过提示(再次聚焦时，清空提示,若未通过验证，还要清除文本框中的数据)
4. 所有要求都满足后才可以提交成功
具体验证条件:
1. 用户名不能为空
*/
//为用户名文本框绑定失去焦点事件
name.onblur = function (){
var nameData = name.value.trim(); //去除字符串前后空白
//检查用户名是否为空
if(!nameData || nameData.length < 6 || nameData.length > 14){
if(!nameData){
uname_sp.innerHTML = "<font color='red'>用户名不能为空</font>"; //分条提示对用户更友好
}else{
uname_sp.innerHTML = "<font color='red'>用户名的长度必须介于:6-14之间</font>";
//清空非法数据
}
name.value = "";
flag[0] = 0;
}else{
//检查用户名是否符合其他约束
var regEpr = /^[A-Za-z0-9]+$/; //添加字符串的开始和结束限制
if(!regEpr.test(nameData)){
uname_sp.innerHTML = "<font color='red'>用户名只能包含数字和字母</font>";
//清空非法数据
name.value = "";
flag[0] = 0;
}else{
uname_sp.innerHTML = "<font color='green'>用户名合法</font>";
flag[0] = 1;
}
}
}
//为用户名文本框绑定聚焦事件
name.onfocus = function (){
//清空提示字样
uname_sp.innerHTML = "";
}
//为密码框1绑定失去聚焦事件
passwd1.onblur = function (){
//只要焦点离开密码框1,密码框2必须清空
passwd2.value = "";
flag[1] = 0;
}
//为密码框2绑定失去聚焦事件
passwd2.onblur = function (){
//只要焦点离开密码框2,就要验证两次密码是否相同且非空
var pwdData2 = passwd2.value;
if(passwd1.value == pwdData2 && pwdData2){
pwd_sp2.innerHTML = "<font color='green'>密码合法</font>";
flag[1] = 1;
}else{
pwd_sp2.innerHTML = "<font color='red'>密码不合法</font>";
flag[1] = 0;
passwd1.value = "";
passwd2.value = "";
}
}
//为密码框绑定事件
passwd2.onfocus = function (){
//清空提示字样
pwd_sp2.innerHTML = "";
}
//为邮箱输入框绑定失去聚焦事件
email.onblur = function (){
var emailData = email.value;
if(!emailData){
sp.innerHTML = "<font color='red'>请先填写邮箱，再验证</font>";
flag[2] = 0;
return;
}
//创建正则表达式对象
var regEpr = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//调用正则表达式对象的test方法进行字符串格式验证
var checkResult = regEpr.test(emailData);
if(!checkResult){
sp.innerHTML = "<font color='red'>非法格式</font>";
flag[2] = 0;
email.value = "";
}else{
sp.innerHTML = "<font color='green'>通过验证</font>";
flag[2] = 1;
}
}
//为邮箱文本框绑定聚焦事件
email.onfocus = function (){
sp.innerText = "";
}
//提交时验证三个文本框是否全部合格
btn.onclick = function (){
var sum = 0;
for(var index in flag){
sum += flag[index];
}
if(sum == 3){
btn_sp.innerHTML = "<font color='green'>提交成功</font>"
//btn.type = "submit"; //实现表单的提交
userform.submit();
}else{
btn_sp.innerHTML = "<font color='red'>提交失败，请按要求填写表单</font>"
}
}
//为提交按钮绑定失去焦点事件
btn.onblur = function (){
//清空提示字样
btn_sp.innerHTML = "";
}
}
</script>
<form id= "userform" action="http:8080/test/test">
用户名:<input type="text" name="username" id="uname"><span id="uname-sp"></span><br>
邮箱:<input type="text" id="email"><span id="sp"></span><br>
密码:<input type="password" name="password1" id="passwd1"><span id="pwd-sp1>"></span><br>
确认密码:<input type="password" name="password2" id="passwd2"><span id="pwd-sp2"></span><br>
<input type="button" name="btn" id="sub-btn" value="提交"><span id="btn-sp"></span>
</form>
</body>
</html>
设置网页时种
<!DOCTYPE html>
<html lang="en">
<head>
<title>显示网页时钟</title>
<meta charset="UTF-8">
</head>
<body>
<script>
/*
需求:
1. 点击显示按钮，在指定的div里以本地语言习惯连续显示当前时间
2. 点击暂停按钮，暂停显示时间
*/
function showTime(){
var nowTime = new Date();
nowTime = nowTime.toLocaleString();
document.getElementById("showTime").innerHTML = nowTime;
}
window.onload = function (){
//获取开始按钮和暂停按钮
var startBtn = document.getElementById("start");
var endBtn = document.getElementById("end");
//为开始按钮绑定点击事件
startBtn.onclick = function (){
//每间隔指定的毫秒数，调用目标函数
endSign = window.setInterval("showTime()", 1000);
}
//为暂停按钮绑定点击事件
endBtn.onclick = function (){
window.clearInterval(endSign);
}
}
</script>
<input type="button" id="start" value="显示时间">
<input type="button" id="end" value="暂停时间"><br>
<div id="showTime"></div>
</body>
</html>
设置顶级窗口
页面1
<!DOCTYPE html>
<html lang="en">
<head>
<title>设置顶级窗口</title>
<meta charset="UTF-8">
</head>
<body>
<!--
需求:如果当前窗口不是顶级窗口，则将其设置为顶级窗口
-->
<iframe src="002.html"></iframe>
</body>
</html>
页面2
<!DOCTYPE html>
<html lang="en">
<head>
<title>002page</title>
<meta charset="UTF-8">
</head>
<body>
<script>
window.onload = function (){
var btn = document.getElementById("setTop");
btn.onclick = function (){
if(window.top != window.self){
//原先当前窗口的顶级窗口的地址为001.html, 现在覆盖成了自己页面的地址
window.top.location = window.self.location;
}
}
}
</script>
002 page<br>
<input type="button" value="设置为顶级窗口" id="setTop">
</body>
</html>
捕捉回车事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js 捕捉键盘回车</title>
</head>
<body>
<script type="text/javascript">
//回车的keyCode 13
//esc的keyCode 27
window.onload = function () {
document.getElementById("login").onkeydown = function(event){
if(event.keyCode == 13){
alert("提交成功，正在验证...");
}
}
}
</script>
<input type="text" name="username" id="login">
</body>
</html>
正则表达式替换所有目标字符串
<<!DOCTYPE html>
<html lang="en">
<head>
<title>利用正则表达式替换所有指定字符</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var targetStr = "name=value&name=value&name=value";
//需求将目标字符串里的'&'替换成';'
//传统实现
//var resultStr = targetStr.replace("&", ";").replace("&", ";");
//正则表达式实现
var resultStr = targetStr.replace(/&/g, ";"); //不要字符串括起来的正则表达式， 会被当作目标串
//替换结果
alert("原先原先结果:" + targetStr); //原先字符串并没有被修改
alert("替换结果:" + resultStr);
</script>
</body>
</html>
JSON简单练习
<!DOCTYPE html>
<html lang="en">
<head>
<title>修改table的tbody内容</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var jsonData = {
"emps" : [
{"empno" : 001, "empname" : "xun", "money" : "2.5W"},
{"empno" : 002, "empname" : "duan", "money" : "1.5W"},
{"empno" : 003, "empname" : "yuan", "money" : "0.8W"},
{"empno" : 004, "empname" : "jie", "money" : "0.7W"}
]
}
window.onload = function (){
//获取显示按钮对象
var btn = document.getElementById("btn");
//为显示按钮绑定点击事件
btn.onclick = function (){
var html = "";
//获取json数组
var emps = jsonData.emps;
for(var index in emps){
//拼接用户信息
html += "<tr>";
html += "<td>"+emps[index].empno+"</td>";
html += "<td>"+emps[index].empname+"</td>";
html += "<td>"+emps[index].money+"</td>";
html += "</tr>";
}
//获取tbody对象，填充数据
document.getElementById("tbody").innerHTML = html;
//获取span对象，填充数据
document.getElementById("count").innerText = emps.length;
}
}
</script>
<h2>员工信息表</h2>
<hr>
<input type="button" id="btn" value="显示员工信息">
<table>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
<tbody id="tbody">
<!--
<tr>
<td>001</td>
<td>xun</td>
<td>25W</td>
</tr>
<tr>
<td>001</td>
<td>xun</td>
<td>25W</td>
</tr>
<tr>
<td>001</td>
<td>xun</td>
<td>25W</td>
</tr>
-->
</tbody>
</table>
总记录:<span id="count">0</span>条
</body>
</html>
标签：function,sp,javascript,innerHTML,练习,getElementById,var,document 来源： https://www.cnblogs.com/nefu-wangxun/p/16499594.html