<!DOCTYPE html> <!-- 这是HTML的注释 --> <html lang="en" id="myHtml"> <head> <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> <style type="text/css"> span { color: red; font-size: 12px; } </style> </head> <body> <!-- JS包括三大块 dom指的是文档对象模型,对网页中的节点进行增删改查的过程 bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址) ecmascript是JS的核心语法ES标准 bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) --> <!-- 实际上bom是包含dom的 --> <!-- bom和DOM是包含关系 --> <script type="text/javascript"> window.onload = function() { var UF = document.getElementById("usernameError"); //通过浏览器窗体获取了html元素 document.getElementById("btn").onclick = function() { alert(btn); } document.getElementById("get").onclick = function() { alert(document.getElementById("txt").value); document.getElementById("nwx").value = "jack"; } var un = document.getElementById("username"); un.onblur = function() { username = un.value; username = username.trim(); if(username) { //代表非空 if(username.length < 6 || username.length > 14) { //用户名长度非法 UF.innerText = "用户名必须在6到14之间"; } else { //用户名长度合法 //判断是否有非法字符 var regExp = /^[A-Za-z0-9]+$/; if(regExp.test(username)) { //合法 } else { //不合法 UF.innerText = "用户名只能由数字和字母组成"; } } } else { //代表空 //提示信息 UF.innerText = "用户名不能为空"; } } un.onfocus = function() { //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理 if(UF.innerText != "") { //清空空格内容 un.value = ""; } //清空提示信息 UF.innerText = ""; } document.getElementById("pwd2").onblur = function() { var pwd1 = document.getElementById("pwd1").value; var pwd2 = document.getElementById("pwd2").value; if(pwd1 != pwd2) { //密码错误的提示标签提示错误 document.getElementById("pwdError").innerText = "两次输入的密码不一致"; } if(pwd1 === "" || pwd2 === "") { document.getElementById("pwdError").innerText = "密码不能为空"; } } document.getElementById("pwd2").onfocus = function() { if(document.getElementById("pwdError").innerText != "") { document.getElementById("pwdError").innerText = ""; } } document.getElementById("email").onblur = function() { var email = document.getElementById("email").value; var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/; if(emailRegExp.test(email)) { } else { //没过 document.getElementById("emailnameError").innerText = "必须输入一个邮箱"; } } document.getElementById("email").onfocus = function() { if(document.getElementById("emailnameError").innerText != "") { document.getElementById("emailnameError").innerText = ""; } } document.getElementById("myForm").onsubmit = function() { } document.getElementById("update").onclick = function() { document.getElementById("username").onblur(); document.getElementById("pwd2").onblur(); document.getElementById("email").onblur(); var emailnameError = document.getElementById("emailnameError").innerText; var emailnameError = document.getElementById("pwdError").innerText; if(UF.innerText === "" && emailnameError === "" && pwdError === "") { document.getElementById("myForm").submit(); } else { alert("输入信息有误"); } } var aihaos = document.getElementsByName("aihao"); document.getElementById("firstCheck").onclick = function() { var flag = document.getElementById("firstCheck"); // if(flag.checked) // { // //全选 // //返回的是多个对象 // for(var i = 0;i < aihaos.length;i++) // { // aihaos[i].checked = true; // } // } // else // { // //取消全选 // //返回的是多个对象 // for(var i = 0;i < aihaos.length;i++) // { // aihaos[i].checked = false; // } // } //简便写法 for(var i = 0;i < aihaos.length;i++) { aihaos[i].checked = flag.checked; } } for(var i = 0;i < aihaos.length;i++) { aihaos[i].onclick = function() { var count = 0; //总选中量和被选中量相同,全选打勾 for(var i = 0;i < aihaos.length;i++) { if(aihaos[i].checked) { count++; } } //简便写法 document.getElementById("firstCheck").checked = (count == aihaos.length); // if(count == aihaos.length) // { // document.getElementById("firstCheck").checked = true; // } // else // { // document.getElementById("firstCheck").checked = false; // } } } document.getElementById("provinceList").onchange = function() { alert(document.getElementById("provinceList").value); } var code; document.getElementById("GetTime").onclick = function() { code = window.setInterval(displayTime,100); } function displayTime() { //获取系统当前时间 var Time = new Date(); //通过日期Date对象获取年月日 var year = Time.getFullYear(); //获取月份,但是是0到11,所以要加1 var month = Time.getMonth(); //获取的一周的第几天 var day = Time.getDate(); //怎么获取毫秒数 var times = Time.getTime(); //转换本地语言的日期格式 Time = Time.toLocaleString(); document.getElementById("TimeDiv").innerText = Time; } document.getElementById("World!").onclick = function() { window.clearInterval(code); } } </script> <input type="button" id="btn" value="hello"/> <input type="text" id="txt"/> <input type="button" id="get" value="获取文本的value"/> <input type="text" id="nwx"/> <input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/> <div> <table> <form id="myForm" action="http://www.baidu.com"> <tr> <th> 用户名: </th> <th> <input type="text" id="username"/> </th> <th> <span id="usernameError"></span> </th> </tr> <tr> <th> 密码: </th> <th> <input id="pwd1" type="text"/> </th> </tr> <tr> <th> 确认密码: </th> <th> <input id="pwd2" type="text"/> </th> <th> <span id="pwdError"></span> </th> </tr> <tr> <th> 邮箱: </th> <th> <input id="email" type="email"/> </th> <th> <span id="emailnameError"></span> </th> </tr> <tr> <th> 注册或重置 </th> <th> <input id="update" type="button" value="注册"/> <input type="reset" value="重置"/> </th> </tr> </form> </table> </div> <div> <table> <form> <tr> <th> <th> <input type="checkbox" name="aihao"/>抽烟 </th> <th> <input type="checkbox" name="aihao"/>喝酒 </th> <th> <input type="checkbox" name="aihao"/>烫头 </th> </th> </tr> <tr> <th> <th> <input type="checkbox" id="firstCheck"/>全选 </th> </th> </tr> </form> </table> </div> <div> <select id="provinceList"> <option selected>请选择省份</option> <option value="河北省">河北省</option> <option value="河南省">河南省</option> <option value="山东省">山东省</option> <option value="山西省">山西省</option> <option value="陕西省">陕西省</option> </select> <input type="button" value="获取时间" id="GetTime"/> <input type="button" value="扎瓦鲁多" id="World!"/> </div> <div id="TimeDiv"></div> </body> </html>
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<style type="text/css">
span
{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!-- JS包括三大块
dom指的是文档对象模型,对网页中的节点进行增删改查的过程
bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址)
ecmascript是JS的核心语法ES标准
bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) -->
<!-- 实际上bom是包含dom的 -->
<!-- bom和DOM是包含关系 -->
<script type="text/javascript">
window.onload = function()
{
var UF = document.getElementById("usernameError");
//通过浏览器窗体获取了html元素
document.getElementById("btn").onclick = function()
{
alert(btn);
}
document.getElementById("get").onclick = function()
{
alert(document.getElementById("txt").value);
document.getElementById("nwx").value = "jack";
}
var un = document.getElementById("username");
un.onblur = function()
{
username = un.value;
username = username.trim();
if(username)
{
//代表非空
if(username.length < 6 || username.length > 14)
{
//用户名长度非法
UF.innerText = "用户名必须在6到14之间";
}
else
{
//用户名长度合法
//判断是否有非法字符
var regExp = /^[A-Za-z0-9]+$/;
if(regExp.test(username))
{
//合法
}
else
{
//不合法
UF.innerText = "用户名只能由数字和字母组成";
}
}
}
else
{
//代表空
//提示信息
UF.innerText = "用户名不能为空";
}
}
un.onfocus = function()
{
//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
if(UF.innerText != "")
{
//清空空格内容
un.value = "";
}
//清空提示信息
UF.innerText = "";
}
document.getElementById("pwd2").onblur = function()
{
var pwd1 = document.getElementById("pwd1").value;
var pwd2 = document.getElementById("pwd2").value;
if(pwd1 != pwd2)
{
//密码错误的提示标签提示错误
document.getElementById("pwdError").innerText = "两次输入的密码不一致";
}
if(pwd1 === "" || pwd2 === "")
{
document.getElementById("pwdError").innerText = "密码不能为空";
}
}
document.getElementById("pwd2").onfocus = function()
{
if(document.getElementById("pwdError").innerText != "")
{
document.getElementById("pwdError").innerText = "";
}
}
document.getElementById("email").onblur = function()
{
var email = document.getElementById("email").value;
var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
if(emailRegExp.test(email))
{
}
else
{
//没过
document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
}
}
document.getElementById("email").onfocus = function()
{
if(document.getElementById("emailnameError").innerText != "")
{
document.getElementById("emailnameError").innerText = "";
}
}
document.getElementById("myForm").onsubmit = function()
{
}
document.getElementById("update").onclick = function()
{
document.getElementById("username").onblur();
document.getElementById("pwd2").onblur();
document.getElementById("email").onblur();
var emailnameError = document.getElementById("emailnameError").innerText;
var emailnameError = document.getElementById("pwdError").innerText;
if(UF.innerText === "" && emailnameError === "" && pwdError === "")
{
document.getElementById("myForm").submit();
}
else
{
alert("输入信息有误");
}
}
var aihaos = document.getElementsByName("aihao");
document.getElementById("firstCheck").onclick = function()
{
var flag = document.getElementById("firstCheck");
// if(flag.checked)
// {
// //全选
// //返回的是多个对象
// for(var i = 0;i < aihaos.length;i++)
// {
// aihaos[i].checked = true;
// }
// }
// else
// {
// //取消全选
// //返回的是多个对象
// for(var i = 0;i < aihaos.length;i++)
// {
// aihaos[i].checked = false;
// }
// }
//简便写法
for(var i = 0;i < aihaos.length;i++)
{
aihaos[i].checked = flag.checked;
}
}
for(var i = 0;i < aihaos.length;i++)
{
aihaos[i].onclick = function()
{
var count = 0;
//总选中量和被选中量相同,全选打勾
for(var i = 0;i < aihaos.length;i++)
{
if(aihaos[i].checked)
{
count++;
}
}
//简便写法
document.getElementById("firstCheck").checked = (count == aihaos.length);
// if(count == aihaos.length)
// {
// document.getElementById("firstCheck").checked = true;
// }
// else
// {
// document.getElementById("firstCheck").checked = false;
// }
}
}
document.getElementById("provinceList").onchange = function()
{
alert(document.getElementById("provinceList").value);
}
var code;
document.getElementById("GetTime").onclick = function()
{
code = window.setInterval(displayTime,100);
}
function displayTime()
{
//获取系统当前时间
var Time = new Date();
//通过日期Date对象获取年月日
var year = Time.getFullYear();
//获取月份,但是是0到11,所以要加1
var month = Time.getMonth();
//获取的一周的第几天
var day = Time.getDate();
//怎么获取毫秒数
var times = Time.getTime();
//转换本地语言的日期格式
Time = Time.toLocaleString();
document.getElementById("TimeDiv").innerText = Time;
}
document.getElementById("World!").onclick = function()
{
window.clearInterval(code);
}
}
</script>
<input type="button" id="btn" value="hello"/>
<input type="text" id="txt"/>
<input type="button" id="get" value="获取文本的value"/>
<input type="text" id="nwx"/>
<input type="text" value="哈哈哈哈哈哈哈哈哈" οnblur="alert(this.value)"/>
<div>
<table>
<form id="myForm" action="http://www.baidu.com">
<tr>
<th>
用户名:
</th>
<th>
<input type="text" id="username"/>
</th>
<th>
<span id="usernameError"></span>
</th>
</tr>
<tr>
<th>
密码:
</th>
<th>
<input id="pwd1" type="text"/>
</th>
</tr>
<tr>
<th>
确认密码:
</th>
<th>
<input id="pwd2" type="text"/>
</th>
<th>
<span id="pwdError"></span>
</th>
</tr>
<tr>
<th>
邮箱:
</th>
<th>
<input id="email" type="email"/>
</th>
<th>
<span id="emailnameError"></span>
</th>
</tr>
<tr>
<th>
注册或重置
</th>
<th>
<input id="update" type="button" value="注册"/>
<input type="reset" value="重置"/>
</th>
</tr>
</form>
</table>
</div>
<div>
<table>
<form>
<tr>
<th>
<th>
<input type="checkbox" name="aihao"/>抽烟
</th>
<th>
<input type="checkbox" name="aihao"/>喝酒
</th>
<th>
<input type="checkbox" name="aihao"/>烫头
</th>
</th>
</tr>
<tr>
<th>
<th>
<input type="checkbox" id="firstCheck"/>全选
</th>
</th>
</tr>
</form>
</table>
</div>
<div>
<select id="provinceList">
<option selected>请选择省份</option>
<option value="河北省">河北省</option>
<option value="河南省">河南省</option>
<option value="山东省">山东省</option>
<option value="山西省">山西省</option>
<option value="陕西省">陕西省</option>
</select>
<input type="button" value="获取时间" id="GetTime"/>
<input type="button" value="扎瓦鲁多" id="World!"/>
</div>
<div id="TimeDiv"></div>
</body>
</html>
JavaScript下拉列表和周期函数实现网页时间刷新和时间暂停-----JavaScript
于 2023-11-09 16:03:05 首次发布