JavaWeb知识整理(四)(JS定时器、样式修改、BOM)

最新推荐文章于 2022-08-02 08:31:14 发布

取不来名字_

最新推荐文章于 2022-08-02 08:31:14 发布

阅读量148

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46097480/article/details/119211024

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

定时器setInterval

window.setInterval(code,millisec):按照指定的周期(间隔)来执行函数或代码片段。

参数1：code必须。执行的函数名或执行的代码字符串。
参数2：millisec必须。时间间隔，单位：毫秒。
返回值：一个可以传递给window.clearInterval()从而取消对code的周期性执行的值。
例如：
方式1：函数名，setInterval(show，100);
方式2：函数字符串，setInterval(“show()”,100);
window对象提供都是全局函数,调用函数时window可以省略。
window.setInterval()等效setInterval()

<div style="width: 100%;">
<img id="imgId" src="img/1.jpg" width="100%" />
</div>
<script type="text/javascript">
// 加载成功启动监听器，5秒执⾏⼀次
window.onload = function () {
setInterval(changeImage, 5000);
}
// 在3张照⽚之间切换
var num = 1;
function changeImage() {
if (num >= 3) {
num = 1;
}
var imageObj = document.getElementById("imgId");
imageObj.src = "img/" + ++num + ".jpg";
}
</script>

JavaScript定时器:setTimeout

setTimeout(code,millisec):在指定的毫秒数后调⽤函数或执⾏代码⽚段。
- 参数1：code必须。要调⽤的函数或要执⾏的代码字符串。
- 参数2：millisec必须。在执⾏代码前需等待的毫秒数。
setInterval() ：以指定周期执⾏函数或代码⽚段。（上⼀个案例已经讲解）
clearInterval() ：取消由setInterval() 设置的timeout。
clearTimeout() ：取消由setTimeout() 设置的timeout。


setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由setInterval()设置的timeout。
clearTimeout()	取消由setTimeout()方法设置的timeout。

JavaScript样式获得或修改

获得或设置样式:

obj.style.属性：获得指定"属性"的值

obj.style.属性=值，给指定"属性"设置内容。

  如果属性由多个单词使用 - 连接，需要将 - 删除，并将后一个单词的首字母大写

<div id="divId" style="height:100px;width:100px;margin:10px;padding:20px;">
</div>
<script type="text/javascript">
// 1 获得div对象
var divObj = document.getElementById("divId");
// 2 获得⾼度
// * divObj.style.height 数据为"100px"
// * 使⽤parseInt()，将字符串"100px"转换成数字"100"
var height = window.parseInt(divObj.style.height);
// 3 将原始⾼度翻倍，再设置给div
// * 注意：必须添加单位，否则⽆效
divObj.style.height = height * 2 + "px";
</script>

BOM(Browser Object Model)

BOM：Window对象（掌握）

DOM Window对象
DOM Navigator
DOM Screen
DOM History
DOM Location
方法：定时器

函数名	描述
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由setInterval()设置的timeout。
clearTimeout()	取消由setTimeout()方法设置的timeout。

方法：消息框

函数名	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框确认框:确认返回true;取消返回false
prompt()	显示可提示用户输入的对话框，点击确定获得用户输入数据

window尺寸

IE9（含，及以上），Chrome、FireFox等其他浏览器获得⽅式
- window.innerHeight - 浏览器窗⼝的内部⾼度
- window.innerWidth - 浏览器窗⼝的内部宽度
Internet Explorer 8、7、6、5
- document.documentElement.clientHeight
- document.documentElement.clientWidth
  或者
- document.body.clientHeight
- document.body.clientWidth
兼容所有浏览器的JS实现⽅案

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

BOM：Location对象

href属性：设置或返回完整的URL。

属性	描述
hash	设置或返回从井号(#)开始的URL(锚)。
host	设置或返回主机名和当前URL的端口号。
hostname	设置或返回当前URL的主机名。
href	设置或返回完整的URL。
pathname	设置或返回当前URL的路径部分
port	设置或返回当前URL的端口号
protocol	设置或返回当前URL的协议
search	设置或返回从问号(?)开始的URL(查询部分)

BOM：History对象（了解）

go()⽅法：跳转到指定⻚⾯
- go(-1) 加载前⼀个链接，等效back()
- go(1) 加载后⼀个链接，等效forwar()
  |方法|描述|
  |—|---|
  |back()|加载history列表中的前一个URL|
  |forward()|加载history列表中的下一个URL|
  |go()|加载history列表中的某个具体页面|

标签题内容：innerHTML

innerHTML - HTML元素的内部⽂本

获得：document.getElementById(“divId”).innerHTML
设置：document.getElementById(“divId”).innerHTML = “…”

相关事件

事件名	描述
onsubmit	确认按钮被点击
onblur	元素失去焦点
onfocus	元素获得焦点

表单校验代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员注册</title>
		
		<style type="text/css">
			input[type=submit]{
				background-color: crimson;
				color: white;
				border: none;
				padding: 16px 50px;
			}
			input[type=text],[type=password]{
				width: 100%;
				height: 30px;
				border-radius: 4px;
				border: 2px solid #c2c2c2;
			}
		</style>
		
		<!--  -->
		<script>
			//1.页面加载函数 onload
			window.onload = function() {
				//获得用户名是输入框 - DOM  全局变量
				usernameInput = document.getElementById("username");
				//添加失去焦点事件
				usernameInput.onblur = function(){
					checkUseranme();
				}
				passwordInput = document.getElementById("password");
				passwordInput.onblur = function(){
					checkPassword();
				}
				qr_passwordInput = document.getElementById("qr_password");
				qr_passwordInput.onblur = function(){
					checkQr_password();
				}
			}
			
			function checkUseranme(){
				//2，正则表达式
				var reg2 = /^[a-zA-Z]\w{5,17}$/;
				//获得输入框中的文本内容
				var username = usernameInput.value;
				var username_msg = document.getElementById("username_msg");
				//3.验证正则表达式和字符串
				if(!reg2.test(username)){
					//提示错误信息
					//4.设置/获取 标签体的内容
					username_msg.innerHTML = "<font color='red' size='2'>用户名格式错误</font>";
					return false;
				}else{
					username_msg.innerHTML = "";
					return true;
				}					
			}
			
			function checkPassword(){
				var reg = /^.{6,16}$/;
				var password = passwordInput.value;
				var password_msg = document.getElementById("password_msg");
				if(!reg.test(password)){
					password_msg.innerHTML = "<font color='red' size='2'>密码长度为6-16字符</font>";
					return false;
				}else{
					password_msg.innerHTML = "";
					return true;
				}
			}
			
			function checkQr_password(){
				var reg3 = passwordInput.value;
				var qr_password = qr_passwordInput.value;
				var qr_password_msg = document.getElementById("qr_password_msg");
				if(reg3 != qr_password){
					qr_password_msg.innerHTML = "<font color='red' size='2'>确认密码错误</font>";
					return false;
				}else{
					qr_password_msg.innerHTML = "";
					return true;
				}
			}
			
			function check(){
				return checkUseranme() && checkPassword() && checkQr_password();
			}
		</script>
		
	</head>
	<body>
		<form action="#" method="get" onsubmit="return check();">
		<table align="center" cellspacing="20px">
			<tr>
				<td><font size="4" color="royalblue">会员注册<font></td>
				<td><font size="2">USER REGISTER</font></td>
			</tr>
			<tr>
				<td align="right"><label for="username">用户名</label></td>
				<td colspan="2"><input type="text" id="username" name="username" placeholder="请输入用户名"/>
				<span id="username_msg"></span>
				</td>
			</tr>
			
			<tr>
				<td  align="right"><label for="password">密码</label></td>
				<td colspan="2"><input type="password" id="password" name="password" placeholder="请输入密码"/>
				<span id="password_msg"></span>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="qr_password">确认密码</label></td>
				<td colspan="2"><input type="password" id="qr_password" name="qr_password" placeholder="请输入确认密码"/>
				<span id="qr_password_msg"></span>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="email">Email</label></td>
				<td colspan="2"><input type="text" id="email" name="email" placeholder="请输入邮箱"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="u_name">姓名</label></td>
				<td colspan="2"><input type="text" id="u_name" name="u_name" placeholder="请输入姓名"/></td>
			</tr>
			
			<tr>
				<td align="right"><label>性别</label></td>
				<td colspan="2">
					<input type="radio" id="male_sex" name="sex" value="male">
					<label for="male_sex">男</label>&nbsp;&nbsp;&nbsp;
					<input type="radio" id="female_sex" name="sex" value="male">
					<label for="female_sex">女</label>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="birthday">出生日期</label></td>
				<td colspan="2"><input type="text" id="birthday" name="birthday" placeholder="请输入出生日期"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="yzm">验证码</label></td>
				<td><input type="text" id="yzm" name="yzm" placeholder="请输入验证码"/></td>
				<td><img width="100px" src="../img/yanzhengma.png"></td>
			</tr>
			
			<tr>
				<td></td>
				<td><input type="submit" value="注册" /></td>
				<td></td>
			</tr>
		</table>
		</form>
	</body>
</html>

取不来名字_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb知识整理(四)(JS定时器、样式修改、BOM)

定时器setIntervalwindow.setInterval(code,millisec):按照指定的周期(间隔)来执行函数或代码片段。参数1：code必须。执行的函数名或执行的代码字符串。参数2：millisec必须。时间间隔，单位：毫秒。返回值：一个可以传递给window.clearInterval()从而取消对code的周期性执行的值。例如：方式1：函数名，setInterval(show，100);方式2：函数字符串，setInterval(“show()”,100);wind
复制链接

扫一扫