在网上看了一些这方面的效果，有的遮罩只能遮住可见区域，如果有滚动条（特别是下面的滚动条）时滚动后的部分依然没遮住；有的是初次生成遮罩即固定遮罩层的大小，如果浏览器窗口大小改变，遮罩层的大小不随着改变，导致出现滚动条。于是自己多方参照写了个，效果还不错，各浏览器也兼容。
使用了jquery，其实不需要也可以，转换一下就行。
http://www.angelscat.cn/lab/overlay.html
<script type="text/javascript">
function isStrictMode(){
return document.compatMode != "BackCompat";
}
function pageWidth(){
return isStrictMode() ? Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) : Math.max(document.body.scrollWidth, document.body.clientWidth);
}
function pageHeight(){
return isStrictMode() ? Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) : Math.max(document.body.scrollHeight, document.body.clientHeight);
}
(function($){
var overlayElement = null;
function createOverlay(opacity, zIndex){
opacity = opacity || 0.3;
zIndex = zIndex || 2000;
var el = $('<div>');
overlayElement = el;
$(el).css({
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': opacity,
'background': '#000',
'z-index': zIndex
}).html('<iframe width="100%" height="100%" frameBorder="0" style="position:absolute;top:0;left:0;z-index:1;"></iframe>' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000;z-index:2;"></div>')
function resize(){
setTimeout(function(){//IE的resize很奇怪
$(el).hide()
.height(pageHeight())
.width(pageWidth())
.show();
}, 0);
}
resize();
$(window).bind('resize', function(){
if (overlayElement && $(overlayElement).css('display') != 'none') {
try {
resize();
}
catch (e) {
}
}
});
$('body').prepend(overlayElement);
}
$.disable = function(lock){
if (!overlayElement) {
createOverlay();
}
if (lock) {
$(document.body).css('overflow', 'hidden');//是否锁屏，锁屏表示overflow:hidden,所有屏幕外的区域不可见;
}
}
$.enable = function(){
if (!overlayElement)
return;
overlayElement.remove();
$(document.body).css('overflow', '');
overlayElement = null;
}
})(jQuery);
</script>
在这里看到据说是腾讯页面重构招聘试题，练练手。
阅读全文 »
闭包(closure)意味着内层的函数可以引用存在于包围它的函数内的变量，即使外层函数的执行已经终止。
阅读全文 »
昨天晚上的宣讲暨现场笔试，本来已经打算不去了的，因为没有提前提交简历，后来同学叫我于是就一起去了，见识见识一下也好。
选的是web前端开发方向，题目感觉做的烂七八糟。下面是一些题目，回来再网上查找的相关资料。 阅读全文 »
刚刚群里有人发出淘宝网校园招聘，于是进去看了下，对于web前端开发还是很感兴趣的，如果能有机会找到一个这方面的工作对我来说简直就是恩赐了，10月28来武汉大学宣讲呢，还是很想去试试的。
不过心虚得很，感觉自己掌握的东西少之又少，这样大的公司应该竞争相当的激烈吧。
在网上找到一些关于web前端开发的东西，摘来看看。 阅读全文 »
Definition and Usage
定语与用法
The getTime() method returns the number of milliseconds since midnight of January 1, 1970.
getTime()方法所返回了从1970年1月1号以来所积累的毫秒总数
Syntax
语法
Tips and Notes
提示与注意点
Note: This method is always used in conjunction with a Date object.
注意：这个方法得结合Date对象使用
Example
举例
In this example we will get how many milliseconds since 1970/01/01 and print it:
在这个举例中我们得到了从1970年1月1号以来所积累的毫秒总数并输出它：
<script type="text/javascript">
var d = new Date()document.write(d.getTime() + " milliseconds since 1970/01/01")
</script>
|
The output of the code above will be:
输出的结果为：
1199788146500 milliseconds since 1970/01/01
|
Example 2
举例 2
In the following example we will calculate the number of years since 1970/01/01:
在这个举例中我们得到了从1970年1月1号以来所用掉的年数总数并输出它：
<script type="text/javascript">
var minutes = 1000*60var hours = minutes*60var days = hours*24var years = days*365var d = new Date()var t = d.getTime()var y = t/yearsdocument.write("It's been: " + y + " years since 1970/01/01!")
</script>
|
The output of the code above will be:
输出结果为：
It's been: 38.045032550101475 years since 1970/01/01!
---------------------------------------
Try-It-Yourself Demos
尝试与演示
getTime()
Use getTime() to calculate the years since 1970.
使用getTime() 来计算从1970年到现在过去了多少年
<html><body><script type="text/javascript">var minutes = 1000*60var hours = minutes*60var days = hours*24var years = days*365var d = new Date()var t = d.getTime()var y = t/yearsdocument.write("1970/01/01距离现在 " + y +" 年！")</script></body></html>
来自蓝色理想:http://bbs.blueidea.com/thread-2844175-1-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
float:left;
width:84px;
margin-right:2px;
}
a.od{
width:80px;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
border: 2px solid #849BCA;
display:block;
color:#547BC9;
float:left;
text-decoration:none;
margin-top:2px;
}
a.od:link{
background:#EEF1F8;
}
a.od:visited{
background:#EEF1F8;
}
a.od:hover{
background:#EEE;
}
a.od:active{
background:#EEE;
}
#fd{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;
/*filter:alpha(opacity=50);*/
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
<a href="#" class="od" onclick = "show(‘fd’);return false;">
[打开层]
</a>
<a href="#" class="od" onclick = "closeed(‘fd’);return false;">
[关闭层]
</a>
</div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function show(id){/*–打开–*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*–打开x–*/
var cx = parseInt(o.style.width);
if(cx < x)
{
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
}
else
{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*–打开y–*/
var cy = parseInt(o.style.height);
if(cy < y)
{
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
}
else
{
clearInterval(proy);
}
}
function closeed(id){/*–关闭–*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block")
{
proyc = setInterval(function(){closey(o)},10);
}
}
function closey(o){/*–打开y–*/
var cy = parseInt(o.style.height);
if(cy > 0)
{
o.style.height = (cy – Math.ceil(cy/5)) +"px";
}
else
{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
function closex(o){/*–打开x–*/
var cx = parseInt(o.style.width);
if(cx > 0)
{
o.style.width = (cx – Math.ceil(cx/5)) +"px";
}
else
{
clearInterval(proxc);
o.style.display = "none";
}
}
/*————————-鼠标拖动———————*/
var od = document.getElementById("fd");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mouseD = true;
}
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{
od.releaseCapture();
od.filters.alpha.opacity = 100;
}
else
{
window.releaseEvents(od.MOUSEMOVE);
od.style.opacity = 1;
}
}
//function readyMove(e){
od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE)
{
od.setCapture();
od.filters.alpha.opacity = 50;
}
else
{
window.captureEvents(Event.MOUSEMOVE);
od.style.opacity = 0.5;
}
//alert(mx);
//alert(my);
}
}
document.onmousemove = function(e){
var e = e ? e : event;
//alert(mrx);
//alert(e.button);
if(mouseD==true && odrag)
{
var mrx = e.clientX – mx;
var mry = e.clientY – my;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY;
}
}
</script>
</body>
</html>
刚好无意中看到百度知道里有人问呐，地址：http://zhidao.baidu.com/question/49672765.html
然后刚好自己看完了这本书嘛，就决定解决解决啦。嘿嘿，没想到又学到东西啦。
在交互性较强的Web应用中，经常需要动态更改指定元素的属性值，假设变量e是页面中一个元素的引用，根据 W3C DOM标准，可以在JavaScript中使用e.getAttribute(‘属性名’)来取得属性的值，并且用e.setAttribute(‘属性名’, ‘值’)来设置属性值。网页标签中，class是一个常用的属性，用于指定某一个元素遵从一个或多个自定义样式，由于class属于JavaScript 保留值，因此当我们要操作元素的class属性值时，直接使用e.getAttribute(‘class’)和e.setAttribute (‘class’, ‘value’)可能会遭遇浏览器兼容性问题。
W3C DOM标准为每个节点提供了一个可读写的className属性，作为节点class属性的映射，标准浏览器的都提供了这一属性的支持，因此，可以使用 e.className访问元素的class属性值，也可对该属性进行重新斌值。而IE和Opera中也可使用e.getAttribute (‘className’)和e.setAttribute(‘className’, ‘value’)访问及修改class属性值。相比之下，e.className是W3C DOM标准，仍然是兼容性最强的解决办法。
以下列表说明了上文提及的三种做法的浏览器兼容性测试：
* e.className 能在IE、Mozilla(Firefox)、Opera和Safari正确运行
* e.getAttribute(‘class’)和e.setAttribute(‘class’, ‘value’) 能在Mozilla(Firefox)和Opera中正确运行，在IE和Safari中则不能使用。
* e.getAttribute(‘className’) 在IE和Opera中正确运行，在Mozilla(Firefox)和Safari中则不能使用。
下面是我自己试验的代码,对最初的代码有所修改:
<script language="javascript">
function c(){
var elem1 = document.getElementById("as");
//alert(elem1.className);测试用
elem1.className="q3";
var elem2 = document.getElementById("ad");
elem2.className="q4";
return false;
}
</script>
<style>
.q1{
color:red;
}
.q2{
color:blue;
}
.q3{
color:green;
}
.q4{
color:yellow;
}
</style>
<div id="as" class="q1"><a href="#" onclick="c()">click me</a> test color</div>
<div id="ad" class="q2"><a href="#" onclick="c()">click me</a> test color</div>
