《JavaScript前端开发案例教程》------第8章事件课后练习
⼀、填空题
1.事件处理程序
2.事件监听
⼆、判断题
1.错。
2.错。
3.对。
三、选择题
1. C
2. B
3. C
四、编程题
1.
<style>
#toolbar {border:1px solid #ff5c00; border-radius:8px;width:60px;position: absolute;height:30px;line-height:30px; top:0; left:0;display: none;backgrou nd-color: #fff;text-align: center; font-size:12px;}
#toolbar e { position: absolute;top:-5px;left:20px;width:10px;height:5px;background:url(arrow.gif) no-repeat;}
</style>
<div id="share">显⽰悬浮⼯具栏。</div><div>不显⽰悬浮⼯具栏</div>
<div id="toolbar"><e></e><span>分享<span></div>
<script>
var toolbar = ElementById('toolbar');
var share = ElementById('share');
// 获取⿏标按下时的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 判断是否有⽂本选中，选中则显⽰浮动⼯具栏
Selection().toString()|| ateRange().text){
toolbar.style.display ='block';
// 设置浮动⼯具栏的显⽰位置
toolbar.style.left = pageX -20+'px';
p = pageY +10+'px';
}
};
var event = event || window.event;
var target = event.target || event.srcElement;
var targetId = target.id;
//没有发⽣在toolbar⾝上才隐藏悬浮⼯具栏
if(targetId !="toolbar"){
toolbar.style.display ='none';
}
}
</script>
2
<style>
.login-header { width:100%;text-align: center;height:30px; font-size:24px;line-height:30px;}
*{margin:0;padding:0;}
.box { width:400px; height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position: absolute;top:15%;left:30%;display: none;} .hd { width:100%; height:25px; background-color: #7c9299; border-bottom:1px solid #369; line-height:25px; color: white;cursor: move;}
#box_close {float: right; cursor: pointer;}
</style>
<div class="login-header"><a id="link">点击，弹出登录框</a></div>
<div class="box" id="box">
<div class="hd" id="drop">注册信息(可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
<script>
// 获取“点击，弹出登录框”的链接、登录框的关闭按钮、登录框、页⾯背景⾊
var link = ElementById("link");
javascript属于前端吗var closeBtn = ElementById("box_close");
var login = ElementById("box");
/
/ 点击登录显⽰登录框和遮罩
login.style.display ="block";
}
// 点击关闭按钮隐藏登录框和遮罩
login.style.display ="none";
}
// 按下键盘上的ESC键隐藏登录框和遮罩
console.log(e.keyCode);//ESC键的键盘码是27
if(e.keyCode ===27){
}
}
</script>