知识点:
-
定时器:建立时间延迟并让定时器知道时限来临时该运行的程序
时间延迟以毫秒表示,1s=1000ms
ps.JS代码需为字符串型,所以放在一对引号内
setTimeout("alert('wake up');",120000);//单次定时器 setInterval("alert('wake up');",120000);//间隔定时器,每到间隔时间反复运行
-
对于没有定义 CSS 或者内联布局盒子的元素为 0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平滚动条(如果存在)。
clientHeight
可以通过 CSSheight
+ CSSpadding
- 水平滚动条高度(如果存在)来计算。此属性会将获取的值四舍五入取整数。如果你需要小数结果,请使用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>
cookies
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);
}