一、填空题
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;background-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 = document.getElementById('toolbar');
var share = document.getElementById('share');
share.onmouseup = function (event) {
// 获取鼠标按下时的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 判断是否有文本选中,选中则显示浮动工具栏
if (window.getSelection().toString() || document.selection.createRange().text) {
toolbar.style.display = 'block';
// 设置浮动工具栏的显示位置
toolbar.style.left = pageX - 20 + 'px';
toolbar.style.top = pageY + 10 + 'px';
}
};
document.onmousedown = function (event) {
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 = document.getElementById("link");
var closeBtn = document.getElementById("box_close");
var login = document.getElementById("box");
// 点击登录 显示登录框和遮罩
link.onclick = function () {
login.style.display = "block";
}
// 点击关闭按钮 隐藏登录框和遮罩
closeBtn.onclick = function () {
login.style.display = "none";
}
// 按下键盘上的ESC键 隐藏登录框和遮罩
document.onkeydown = function (e) {
console.log(e.keyCode);//ESC键的键盘码是27
if (e.keyCode === 27) {
closeBtn.onclick();
}
}
</script>