《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;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>

<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键的键盘码是27if (e.keyCode === 27) {closeBtn.onclick();}}
</script>

《JavaScript前端开发案例教程》------第8章事件课后练习相关推荐

输入圆的半径计算面积和周长-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)
[案例2-5]输入圆的半径计算面积和周长一.案例描述考核知识点 toFixed().isNaN.window.document对象练习目标掌握toFixed()方法. 掌握数据类型检测. 了解 ...
计算圆的面积和周长-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第4章-课后作业)
[案例4-5]计算圆的面积和周长一.案例描述考核知识点 Math.PI().Math.pow() 练习目标掌握Math.pow()用法. 掌握Math.PI()用法. 了解圆的周长公式. 了解圆 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章:播放器图标-课后习题参考代码 ........ 记得关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
js前端开发案例教程之DOM购物车（动手实践：购物车）
js前端开发案例教程之 DOM购物车(动手实践:购物车) html和css <!DOCTYPE html> <html><head><meta charse ...
《JavaScript前端开发与实例教程（微课视频版）》
#好书推荐##好书奇遇季#<JavaScript前端开发与实例教程(微课视频版)>,京东当当天猫都有发售.定价59元,网店打折销售更便宜.适合JavaScript初学者,可作为高校相关课程 ...
《HTML5+CSS3+JavaScript前端开发从零开始学（视频教学版）》简介
#好书推荐##好书奇遇季#<HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)>,京东当当天猫都有发售.定价69元.本书配套本书配套示例源代码.PPT课件与同步教学 ...
php网站开发案例教程ppt,php网站开发案例教程》课件.ppt
php网站开发案例教程>课件.ppt 还剩 178页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! 内容要点: PHP ...
java高级框架应用开发案例教程_Java高级框架应用开发案例教程：struts2+spring+hibernate PDF...
资源名称:Java高级框架应用开发案例教程:struts2+spring+hibernate PDF 第1章 struts+spring+hibernate概述 1.1 框架概述 1.2 struts ...

《JavaScript前端开发案例教程》------第8章事件课后练习

《JavaScript前端开发案例教程》------第8章事件课后练习相关推荐

最新文章

热门文章