《Head First HTML5 javascript》第3章探索浏览器知识点总结

袭瑛

已于 2022-11-04 17:41:11 修改

阅读量205

点赞数

分类专栏：前端开发文章标签： css html 前端 javascript

于 2022-11-04 17:38:22 首次发布

本文链接：https://blog.csdn.net/hcud024/article/details/127693525

版权

前端开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

知识点：

定时器：建立时间延迟并让定时器知道时限来临时该运行的程序

时间延迟以毫秒表示，1s=1000ms

ps.JS代码需为字符串型，所以放在一对引号内
```
setTimeout("alert('wake up');",120000);//单次定时器
setInterval("alert('wake up');",120000);//间隔定时器，每到间隔时间反复运行
```
Element.clientHeight

对于没有定义 CSS 或者内联布局盒子的元素为 0；否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度（如果存在）来计算。此属性会将获取的值四舍五入取整数。如果你需要小数结果，请使用 element.getBoundingClientRect()。

三种方法能够确定浏览器窗口的尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
- window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
style 属性规定元素的行内样式（inline style）将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式在 HTML5 中, style 属性可用于任何的 HTML 元素
```
<element style="style_definitions">
```
onresize

onresize 事件会在窗口或框架被调整大小时发生。
```
<element onresize="SomeJavaScriptCode">
```

cursor 设置光标的类型，在鼠标指针悬停在元素上时显示相应样式。

/* 关键字值 */
cursor: pointer;
cursor: auto;

/* 使用 URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;

/* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset;

cookies 浏览器存储在用户计算机里的数据

Cookie 以名/值对形式存储:username=John Doe

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

/* 创建cookie */
document.cookie="username=John Doe";

/* 为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除： */
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

/* 使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。 */
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

/* 在 JavaScript 中，修改 cookie 类似于创建 cookie*/
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

/* 读取cookie */
var x = document.cookie;

/* 删除 cookie ，设置 expires 参数为以前的时间；注意，删除时不必指定 cookie 的值*/
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

监测cookie是否可用 navigator.cookieEnabled

如果浏览器启用了 cookie，该属性值为 true。如果禁用了 cookie，则值为 false。

if (!navigator.cookieEnabled) {
  // The browser does not support or is blocking cookies from being set.
}

prompt 显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

window.prompt() instructs the browser to display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog.

Under some conditions — for example, when the user switches tabs — the browser may not actually display a dialog, or may not wait for the user to submit text or to cancel the dialog.

let sign = prompt("What's your sign?");

if (sign.toLowerCase() === "scorpio") {
  alert("Wow! I'm a Scorpio too!");
}

// there are many ways to use the prompt feature
sign = window.prompt(); // open the blank prompt window
sign = prompt();       //  open the blank prompt window
sign = window.prompt('Are you feeling lucky'); // open the window with Text "Are you feeling lucky"
sign = window.prompt('Are you feeling lucky', 'sure'); // open the window with Text "Are you feeling lucky" and default value "sure"

案例源码：

<html>
	<head>
		<title>iRock - The Virtual Pet Rock</title>
		<script type="text/javascript" src="cookie.js"></script>
		<script type="text/javascript">
			var userName;
			function resizeRock()
			{
				document.getElementById("rockImg").style.height = (document.body.clientHeight - 110) * 0.9; 
			}

			
			function greetUser()
			{
				if(navigator.cookieEnabled)
					userName = readCookie("irock_username");
				if(userName)
					alert("Hello " + userName + ", I missed you.");
				else
					alert("Hello, I am your pet rock.");
			}
			function touchRock()
			{
				if(userName)
					alert("I like the attention, " + userName + ". Thank you.");
				else
				{
					userName = prompt("What is your name?", "Enter your name here.");
					if(userName)
					{
						alert("It is good to meet you, " + userName + ".");
						if(navigator.cookieEnabled)
							writeCookie("irock_username", userName, 5*365);
						else
							alert("Cookies aren't supported.");
					}
				}
				document.getElementById("rockImg").src = "rock_happy.png";
				setTimeout("document.getElementById('rockImg').src='rock.png';", 50000);
			}
		</script>
	</head>

	<body onload="resizeRock(); greetUser();" onresize="resizeRock();">
		<div style="margin-top:100px; text-align:center">
			<img id="rockImg" src="rock.png" alt="iRock" style="cursor: pointer;" onclick="touchRock();"/>
		</div>
	</body>
</html>

function writeCookie(name,value,days)
{
	var expires = "";
		
	if(days)
	{
		var date = new Date();
		date.setTime(date.getTime() + (days*24*60*60*1000));
		expires = ";expires=" + date.toGMTString();
	}
	var cookie = name + "=" + value + expires + "; path=/";
	alert(cookie);
	document.cookie = cookie;
}

function readCookie(name)
{
	var searchName = name + "=";
	var cookies = document.cookie.split(';');
	for(var i=0;i<cookies.length; i++)
	{
		var c = cookies[i];
		while(c.charAt[0] == ' ')
			c = c.substring(1,c.length);
		if(c.indexOf(searchName) == 0)
			return c.substring(searchName.length,c.length);
	}
	return null;
}
function eraseCookie(name)
{
	writeCookie(name,"",-1);
}

袭瑛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《Head First HTML5 javascript》第3章探索浏览器知识点总结

style 属性规定元素的行内样式（inline style）将覆盖任何全局的样式设定，例如在标签或在外部样式表中规定的样式在 HTML5 中, style 属性可用于任何的 HTML 元素。否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。如果浏览器启用了 cookie，该属性值为 true。如果禁用了 cookie，则值为 false。设置光标的类型，在鼠标指针悬停在元素上时显示相应样式。属性来创建、读取、及删除 cookie。
复制链接

扫一扫