HTML5+CSS3+JavaScript-编程习题答案_第1页
HTML5+CSS3+JavaScript-编程习题答案_第2页
HTML5+CSS3+JavaScript-编程习题答案_第3页
HTML5+CSS3+JavaScript-编程习题答案_第4页
HTML5+CSS3+JavaScript-编程习题答案_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3+JavaScript编程习题答案第一章编程习题答案4、编程题(1)<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃>〈title〉习题l</title></head><body>锄禾日当午，汗滴禾下土</body></html>第二章编程习题答案4、编程题(1)<!DOCTYPEhtml><htmllang="en〃><head><metacharset二〃UTF-8〃>〈title》个人介绍卡片〈/title》<style>body{background-color:#acf;</style>color:#6495ef;)/*鼠标点击<a〉标签后，文字变颜色*/a:visited{color:#778899;}/*鼠标放到<a〉标签时，文字变颜色*/a:hover{color:#9400D3;)/*鼠标点击标签未松开时，文字变颜色*/a:active{color:hotpink;)</style></head><body><table>〈caption〉中国大学排行榜〈/caption》<thead><tr><th>名次〈/th〉<thclass="school”〉大学〈/th〉<th>地区</th><th>类型〈/th〉(th>世界排名</th></tr></thead><tbody>10<tr><tdclass=/，first，z>K/td><tdclass二〃school〃><ahref二〃s:///item/%E6%B8%85%E5%8D%8E%E5%A4%A7%E5%AD%A6/111764z，target=〃二61@成〃>清华大学</aX/td><tdclass="first”〉北京</td><tdclass="first"〉理工〈/td>tdclass=/，first，z>16</td></tr><tr>tdclass二〃second〃>2〈/td>tdclass二〃school〃>〈/item/%E5%8C%97%E4%BA%AC%E5%A4%A7%E5%AD%A6z，target=〃-_blank〃>北京大学〈/a〉</td>tdclass二〃second”〉北京</td>tdclass="second”〉综合</td>tdclass=/，second，，>16</td></tr><tr>tdclass="third〃>3〈/td>tdclass二〃school〃Xahref^./item/%E5%A4%8D%E6%97%A6%E5%A4%A7%E5%AD%A6〃target=〃-_blank〃〉复旦大学</a*/td>tdclass="third”〉上海〈/td〉tdclass二〃third”〉综合〈/td>tdclass二〃third〃〉60〈/td〉</tr><tr><td>4</td><tdclass二〃school〃><a11<tdhref『s:///item/%E6%B5%99%E6%Bl%9F%E5%A4%A7%E5%AD%A6z，target=〃-_blank〃〉浙江大学〈/a〉</td>〈td>浙江</td>td>综合</td><td>75</td></tr><tr><td>5</td>tdclass二〃schoohref二〃./item/%E4%B8%8A%E6%B5%B7%E4%BA%A4%E9%80%9A%E5%A4%A7%E5%AD%A6/131671〃target=〃-_blank〃>上海交通大学</aX/td>td>上海</td>td>综合</td><td>84</td></tr><tr><td>6</td>tdclass二〃school〃>〈ahref二〃./item/%E4%B8%AD%E5%9B%BD%E7%A7%91%E5%AD%A6%E6%8A%80%E6%9C%AF%E5%A4%A7%E5%AD%A6〃target=〃-_blank〃>中国科学技术大学</aX/td>〈td>安徽</td〉td>理工</td><td>88</td></tr><tr><td>7</td>tdclass二〃school〃Xahref二〃s:〃/item/%E5%8D%97%E4%BA%AC%E5%A4%A7%E5%AD%A6z，target=〃-_blank〃>南京大学〈/a></td>td>江苏</td>12〈td〉综合〈/td〉<td>105</td></tr><tr><td>8</td>tdclass二〃school〃>〈ahref二〃s:〃/item/%E6%AD%A6%E6%Bl%89%E5%A4%A7%E5%AD%A6〃target=〃-_blank〃>武汉大学〈/a〉</td>td>湖北</td〉td>综合</td><td>157</td></tr><tr><td>9</td>tdclass二〃school〃><ahref=，/item/%E5%8D%97%E6%96%B9%E7%A7%91%E6%8A%80%E5%A4%A7%E5%AD%A6，/target="-_blank〃〉南方科技大学〈/aX/td>td>广东</td〉td>理工</td><td>162</td></tr><tr><td>10</td>tdclass=//schoolz，Xahref二〃・/item/%E5%8D%8E%E4%B8%AD%E7%A7%91%E6%8A%80%E5%A4%A7%E5%AD%A6"target=〃-_blank〃>华中科技大学</aX/td〉〈td〉湖北〈/td〉td>综合</td><td>181</td></tr>13</tbody></table></body></html>第四章编程习题答案4、编程题<!DOCTYPEhtml><htmllang二〃en〃〉<head><metacharset二〃UTF-8〃>〈title》定位展示知识点视图〈/title〉<style>/*设置父元素*/#view{width:100%;height:lOOOpx;background-color:rgba(255,255,208,0.5);/*设置具有透明度的背景颜色*/position:relative;/*父元素设置相对定位*/)/*设置中间子元素*/.box{width:396px;height:224px;border-radius:50%;/*设置圆角*/background-image:url(../image/h5.png);/*设置背景图片*/position:relative;/*设置相对定位*/14top:230px;/*设置具体位置*/left:200px;z-index:99;/*设置堆叠顺序，提高层级*/).boxl{width:310px;height:210px;background-color:rgba(255,160,122,0.5);color:#2f4f4f;position:absolute;/*设置圆绝对定位*/top:50px;left:150px;}.box2{width:250px;height:230px;background-color:rgba(119,136,153,0.5);color:#2f4f4f;position:absolute;top:390px;left:70px;).box3{width:220px;height:230px;background-color:rgba(204,153,153,0.5);color:#2f4f4f;position:absolute;top:380px;15left:535px;}/*统一设置标题*/.boxlh4,.box2h4,.box3h4{padding-top:15px;/*设置上内边距*/）</style></head><body><!-定义父元素~><divid二〃view〃><!-定义中间子元素--><divclass二〃box〃X/div><!~定义子元素嵌套无序列表--><divclass二〃boxl〃><h4>HTML基础和HTML5</h4><ul><li>HTML标签与属性</li>〈li〉HTML5多媒体（视频和音频）</li><li>HTML5图像标签（画布和SVG）</li><li>HTML5地理定位</li><li>HTML5表单〈/li></ul></div><divclass=〃box2〃><h4>CSS基础和CSS3</h4><ultype二〃circle”〉<li>CSS选择器</li><li>CSS样式</li><li>CSS盒模型与定位</li〉16<li>CSS3的2D与3D转换</li><li>CSS3的过渡与动画</li><li>CSS3新的边框效果</li〉</ul></div><divclass=〃box3〃〉<h4>JavaScript</h4><ultype二〃square”〉<li>数据类型</li><li>运算符〈/li〉Gi〉基础语法</li><li>BOM对象</li><li>DOM对象</li><li>JS特效</li></ul></div></div></body></html><!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃〉盒模型制作新闻资讯〈/title》<style>/*清除页面默认边距*/*{margin:0;17padding:0;/*设置页面的父元素块*/#box{width:980px;margin:lOpxauto;/*设置距离body是上下外边距，左右为居中显示/*设置标题局部的宽度和高度*/.header(width:980px;height:50px;}/*设置标题局部的文字*/.headerp{font:bold20Px〃微软雅黑〃；/*文字样式的连写，文字加粗、字号、字体*/margin-bottom:10px;/*设置下外边距*/}/*标题局部内的图片*/.headerpimg{vertical-align:middle;/*图文横向混排时，文字与图片中部对齐*//*设置左右两半局部的元素块*/,left,.right{float:left;/*向左浮动*/margin-top:15px;/*设置上外边距*/}.left{width:520px;margin-right:30px;/*设置左半局部的右外边距*/18/*左半局部每一个新闻的标题*/.c（font:bold17Px〃微软雅黑〃；}/*统一设置放置图片的块元素上外边距*/,imagel,.image2,.image3{margin-top:lOpx;}/*统一为每个新闻块添加下内边距*/,newsl,.news2,.news3{padding-bottom:30px;}/*设置新闻块底部文字*/.leftp{font-size:12px;color:#999999;}/*底部文字的特定"+关注”*/,leftspan{color:ttFFOOOO;padding-left:5px;/*添加左内边距*/}/*设置右半局部“热文推荐”*/,right{width:430px;）/*设置右半局部每个新闻块*/.wl,.w2,.w3{margin-top:lOpx;19</head><body><h4>              fenbsp;     fenbsp;fenbsp;fenbsp;个人介绍</h4><p>姓名：小千          fenbsp;    fenbsp;状态：活力无限〈br>爱好：探索新事物，运动健身、影视文学<br>自我评级：祖国的新一代，精通各项IT应用技术<br></p></body></html>(2)<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃>〈title》标签导航条〈/title〉<style>/*超链接<a>去掉文本修饰下划线*/a(text-decoration:none;/*鼠标放到〈a>标签时，文字变颜色*/a:hover{color:46495ef;)/*图文混排时，为图片添加vertical-align属性，设置要对齐的位置*/img{.righth3{color:#CC9999;}/*设置超链接新闻文章标题*/.hota{text-decoration:none;color:#333;}/*右半局部新闻文章图片*/.hotimg(width:310px;height:140px;margin-top:5px;}</style></head><body><divid二〃box〃><divclass="header”〉<pclass二〃ti"Ximgsrc=，z../image/pin.png/z太空探测</p><hrsize=〃3〃></div><divclass二〃left〃><divclass二〃newsl〃〉<h4cla.ss=〃c〃>飞行了200多亿公里的旅行者1号，为何不会撞上太空中的小行星</h4><divclass二〃imagel”〉<imgsrc=〃・・/image/news-1.png〃alt=〃〃><imgsrc=〃・・/image/news-2.png〃alt=〃〃>20</div>〈P>寻巧资讯  刚刚〈span>+关注〈/spanX/p></div><divclass二〃news2〃><h4class=〃c〃>欧洲探测器从4亿公里外传回多张照片，拍摄到不明人形物体</h4><divclass二〃image2〃〉<imgsrc=〃・・/image/news-3.png〃alt=〃〃><imgsrc=z，../image/news-4.png'"alt=〃〃〉</div>〈p〉百日娱记  2分钟前<span〉+关注</span></p></div><divclass二〃news3〃><h4。加$5=%〃>为什么太空没有氧气，陨石仍然能够燃烧这是什么原理</h4〉<divclass=/，image3，，><imgsrc=z，../image/news-5.png〃alt=〃〃><imgsrc=〃・・/image/news-6.png〃alt=〃〃></div><p>涵瑶社会  5分钟前<span>+关注</span></p></div></div><divclass二〃right〃>〈h3〉热文推荐〈/h3〉<divclass二〃hot〃><divclass=〃wl〃><P><ahref=〃#〃>研究说明：变异的毒株在空气中传播的能力会越来越强21<imgsrc=〃・・/image/hot-1.png〃></div><divclass二〃w2〃〉<P><a9城二〃#〃>白墙脏了不用重新刷，一个窍门，简单一擦，立马干净如新</a></p><imgsrc=〃・・/image/hot-2.png〃></div><divclass="w3〃〉〈pXahref=〃#〃>俗语“八月十二用一宝，四季无烦恼”，一宝竟是盐水强</a></p><imgsrc=〃・・/image/hot-3.png〃〉</div></div></div></div></body></html>第五章编程习题答案4、编程题(1)<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃〉〈title》信息登记表〈/title〉<style>#info{width:450px;22height:600px;background-color:ftfcfaed;margin:lOpxauto;)label{display:inline-block;width:90px;text-align—last:justify;)input,select,textarea{margin-left:20px;padding:0.5em;}</style></head><body><divid二〃info〃><formaction』#"method二〃post"enctype=/，multipart/form-dataz，><fieldset>〈legend》信息登记〈/legend》<P><labelfor二〃user"〉姓名〈/label〉<inputtype二〃text"id="user"name="user"〉</p><P><labelfor二〃age"〉年龄〈/label》<inputtype二〃number"id二〃age〃name二〃age〃></p><P><labelfor=〃〃>性别〈/label>23<inputtype=〃radio“name=〃gender"value二〃man〃>男<inputtype二〃radio“name=〃gender"value=〃woman”〉女</p><P><labelfor=〃tell〃>号码</label》<inputtype二〃tel〃id=〃tell〃name=，，tell，，></p><P><labelfor二〃mail〃>邮箱</label>〈inputtype=emailid二mailname=mail></p><P><labelfor二〃time〃>出生日期〈/label〉<inputtype二〃date“id=〃time“name二〃time〃></p><P><labelfor二〃edu〃〉学历〈/label><selectname二〃edu〃id二〃edu〃〉<optionvalue=/，beijing/z>^<^</option><optionvalue二〃hebei“selected〉本科〈/option〉<optionvalue二〃liaoning〃>硕士研究生〈/option〉<optionvalue=，，liaoning，，>'lWi^^L^</option>/select></p><P>labelfor二〃upload”〉身份证〈/label><inputtype二〃file“name二〃file"id=〃upload〃></p><P>labelfor二〃tip”〉备注</label>24<textareaname二〃tip"id二〃tip“cols=〃30〃rows=，/5，，></textarea></p><P><inputtype二〃submit"value=〃提交表单〃》<inputtype="，reset，/value二〃重新填写〃></p></fieldset></form></div></body></html>第六章编程习题答案4、编程题(1)<!DOCTYPEhtml><htmllang=〃en〃><head>metacharset二〃UTF-8〃〉title>图标动态效果〈/title》<style>ul{width:350px;height:80px;background-color:#d8d8d8;margin:30pxauto;list-style:none;overflow:hidden;ulli(25float:left;width:60px;height:60px;background-color:#99CC66;display:inline-flex;/*将对象作为内联块级弹性伸缩盒显示*/justify-content:center;/*工程位于容器中央*/align-items:center;/*居中对齐弹性盒*/margin:8px;border-radius:50%;}ulliimg{width:30px;height:30px;transition:allIs;)li:hover{background-color:#CC9999;}li:hoverimg{transform:scale(1.5)rotate(30deg);}</style></head><body><ul>li><imgsrc=〃・・/image/weixin-1・png"alt=〃〃〉〈/li〉li><imgsrc=，/../image/qq-1.png，zalt=，，，，X/li>li><imgsrc=，z../image/weibo-1.png，zalt=〃〃li><imgsrc=，z../image/QQZone-1.png，?alt=〃〃</ul>26</body></html>第七章编程习题答案4、编程题<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃>〈title〉删除数组元素〈/title〉</head><body><script>vararr=[5500,4000,3800,6000,4300,4800,3500,6200,4300]console,log(〃删除前的数组”,arr);for(vari=0;i<arr.length;i++){if(arr[i]>5000){arr.splice(i,1);i一;〃注意，splice删除以后就没有那个元素了，元素角标也会进一位〃所以for循环也要进一位))console,log(〃删除后的数组〃,arr);</script></body></html>(2)27<!DOCTYPEhtml><htmllang=，，en，，><head><metacharset二〃UTF-8〃〉增加删除学生信息信title》<style>table{border:Ipxsolid;margin:auto;width:500px;border-collapse:collapse;)td,th{text-align:center;border:Ipxsolid;)div{text-align:center;margin:30px;}</style></head><body><div><inputtype=〃text"id="id〃placeholder=〃请输入编号〃〉<inputtype二〃text“id=〃name"placeholder=〃请输入姓名〃》<inputtype二〃text"id="gender"placeholder=〃请输入性别〃》<inputtype="button"value=〃添力口〃id二〃btnadd〃></div>28<table>〈caption)学生信息表〈/caption〉<tr>th>编号</th>th>姓名</th>th>性别</th>th>操作</th></tr><tr><td>l</td>td>林萌萌〈/td>td>女</td>td><ahref=/zjavascript:void(0);〃onclick=，/delTr(this);〃>删除</a></td></tr><tr><td>2</td>〈td>杨阳</td〉td>男</td〉td><ahref=z，javascript:void(0);〃onclick=，，delTr(this);">删除</aX/td></tr><tr><td>3</td>td>肖岩</td>td>男</td>td><ahref="javascript:void(0);〃onclick二〃delTr(this);〃>删除</aX/td></tr><tr><td>4</td><td>郭易雅</td>29vertical-align:middle;)</style></head><body><P>ahref二〃s:///〃target=，，_blank，，Ximgsrc=//../image/baidu.png〃alt=〃〃>百度一下</a></p><P>ahref="./〃target=〃_blank〃>〈inigsrc=〃・・/image/gov.png〃中国政府网〈/a></p><P>ahref="://people,/〃target二〃_blank〃><inigsrc=/z../image/people.pngz，alt=〃〃>人民网www・〈/a></p><P>ahref=，/:///〃target=〃_blank〃>〈inigsrc=，/../image/job.png〃alt=〃〃〉中国就业网</a></p></body></html>(3)<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃><title>江南古镇图片展览〈/title》〈td>女</td〉<td><ahref二〃javascript:void(0)onclick="delTr(this)>删除</a></td></tr></table><script>〃使用innerHTML添加document.getElementByld(^btnadd^).onclick=function(){//2.获取文本框的内容varid=document.getElementByldC'id'O.value;varname=document.getElementById(，，name,，).value;vargender=document.getElementById(//gender，/).value;〃获取tablevartable=document.getElementsByTagName(/ztablez，)[0];〃追加一行table.innerHTML+=〃<tr>\n〃+〃〈td〉〃+id+〃〈/td〉\n〃+〃<td>〃+nanie+“</td>\n〃+〃<td>〃+gender+〃〈/td〉\n〃+，z<tdXahref=\z/javascript:void(0);\〃onclick=\，，delTr(this);\〃>删除</a></td>\n，z+〃〈/tr〉〃；}〃删除方法functiondelTr(del){vartable=del.parentNode.parentNode.parentNode;vartr=del.parentNode.parentNode;table.removeChild(tr);</script>30</body></html>第八章编程习题答案4、编程题(1)<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃>〈title》模拟棋盘〈/title〉<style>/*清除页面默认边距*/*{margin:0;padding:0;}/*设置标题*/h3{width:160px;height:30px;margin:5pxauto;}/*设置画布*/canvas{display:block;border:Ipxsolid#000;margin:lOpxauto;31</style></head><body>〈h3〉模拟国际象棋棋盘</h3><canvaswidth=〃400〃height=〃400〃X/canvas><script>varmycanvas=document.getElementsByTagName(/，canvas，/)[0];varctx=mycanvas.getContext(〃2d〃);//通过遍历，对棋盘中的奇数行和偶数行分别处理for(varj=0;j<10;j++){//奇数行时，显示黑白相间小方块if(j%2==0){for(vari=0;i<5;i++){ctx.fillRect(i*100,j*50,50,50);}}〃偶数行时，显示白黑相间小方块else{for(vari=0;i〈5;i++){ctx.fillRect(i*100+50,j*50,50,50)</script></body></html>(2)<!DOCTYPEhtml><htmllang=〃en〃>32<head><metacharset二〃UTF-8〃>〈title)奖品〈/title〉<style>*{margin:0;padding:0;}#box{width:400px;height:250px;background-color:#cf2213;margin:20pxauto;position:relative;overflow:hidden;)h3(width:112px;height:46px;font-size:35px;margin:20pxauto0;)p(width:240px;height:80px;background-color:#fff;text-align:center;line-height:40px;position:absolute;left:80px;33top:lOOpx;font-size:25px;vertical-align:middle;color:#e4393c;}canvas{position:absolute;left:80px;top:lOOpx;vertical-align:middle;}</style></head><body><divid二〃box"〉<h3>刮刮乐</h3>〈p>一等奖<br〉(一台冰箱)</p><canvaswidth="240〃height="80〃style二〃border:Ipxsolid#999;z/></canvas></div><script>varmycanvas=document.getElementsByTagName(，，canvas，z)[0];varctx=mycanvas.getContext(〃2d〃);//填充画布颜色ctx.fillStyle二〃rgb(200,200,200)〃；//绘制矩形区域ctx.fillRect(0,0,240,80);/*需求：实现鼠标按下移动时，能够清除灰色区域，并显示底部内容varguaFlag=false;34mycanvas.onmousedown=function(){〃鼠标按下时表示可以刮guaFlag=true;）；//整个页面抬起时，都不能刮document.onmouseup=function(){〃鼠标抬起时表示不可以刮guaFlag=false;mycanvas.onmousemove=function(event){if(iguaFlag){//表示不能刮，当前是鼠标抬起状态return;//鼠标按下可以执行，表示可以刮的状态//获取当前鼠标在canvas里面的横纵坐标varx=event.offsetX;vary=event.offsetY;//clip。方法必须配合保存与读取方法使用ctx.save();ctx.arc(x,y,10,0,Math.PI*2);ctx.clipO;//每次鼠标移动都要重新定点，否那么绘制出的效果有差异ctx.moveTo(x,y);ctx.clearRect(x-10,y-10,20,20);ctx.restore();</script></body>35第九章编程习题答案3、编程题<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃>〈title》闪动动画〈/title》<style>*{margin:0;padding:O;}#box{width:150px;height:150px;background-color:#e9b2c7;position:absolute;left:0;)</style></head><body>〈button〉闪动动画〈/button〉<divid=，，box，，X/div><script>varbtn=document.getElementsByTagName(z，button/z)[0];36varbox二document.getElementByldCzbox，z);btn.onclick=function(){box.style,left=〃300px”;)</script></body></html><!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃>〈title》匀速焦点图</title〉<style>*{margin:0;padding:0;)#box{width:600px;height:330px;border:lpxsolid#aaa;margin:20pxauto;)#box>.inner{width:600px;height:330px;position:relative;overflow:hidden;37ul{width:3000px;height:330px;list-style:none;position:absolute;)ul>li,img{width:600px;height:330px;)ul>li{float:left;)ol{list-style:none;position:absolute;right:30px;bottom:20px;}ol>li{float:left;width:26px;height:26px;line-height:26px;text-align:center;background-color:4fff;border-radius:13px;margin-right:lOpx;cursor:pointer;38ol>li.current{background-color:#ff0022;color:#fff;}</style></head><body><divid二〃box〃><divclass二〃inner”〉<ul><li><imgsrc=/，../image/21.jpg，zalt=〃〃〉</li><li><imgsrc=//../image/22.jpg，zalt=〃〃〉〈/li〉li><imgsrc=/z../image/23.jpgz，alt=〃〃></li>li><imgsrc=/z../image/24.jpg，zalt=〃〃></li>li><imgsrc=〃・・/image/25・jpg〃alt=〃〃></li></ul><ol><liclass=z/currentz，>l</li><li>3</li><li>4</li><li>5</li></ol></div></div><script>〃1.获取元素111olol>livarul二document.getElementsByTagName(〃ul〃)[0];39<style>/*为整个大图片块设置宽高*/ttcartoon{width:700px;height:594px;}/*设置每个图片的宽高*/img(width:345px;height:194px;}</style></head><body>。2>江南古镇图片展览</h2><!一定义整个大图片块id为cartoon--><divid二〃cartoon”〉<!-分组设置3个子元素块，里面分别放置两张图片<divclass二〃photol”〉<imgsrc=zz../image/building-1.jpg，zalt=〃〃><imgsrc=zz../image/building-2.jpg，zalt=〃〃></div><divclass二〃photo2〃>imgsrc=，/../image/building-3.jpgz，alt=〃〃〉imgsrc=，z../image/building-4.jpgz，alt=〃〃></div><divclass=，/photo3//>imgsrc=，/../image/building-5.jpg，zalt=〃〃>imgsrc=，z../image/building-6.jpgz，alt=〃〃〉</div>varol=document.getElementsByTagName(〃ol〃)[0];varliArr=ol.children;for(vari=0;i<liArr.length;i++){//2.for循环给当前每一个li绑定索引值属性liArr[i].index=i;//3.循环给小圆点ol>li添加点击事件liArr[i].onclick=function(){“console.log(〃索引值为：〃,this.index);//4.利用排他思想实现小圆点切换for(vari=0;i<liArr.length;i++){liArr[i].removeAttribute(，，class，z);}this.setAttribute("class","current");〃5,调用匀速动画方法，传入ul和终点位置constant(ul,-this.index*600);)}〃匀速动画封装方法functionconstant(ele,endx){〃L要用定时器，先清除定时器clearinterval(ele.timer)//2.判断获取步长varstep=(endx-ele.offsetLeft)>0?10：-10;//3.启动定时器ele.timer=setlnterval(function(){//4.位移元素ele.style.left=ele.offsetLeft+step+〃px〃;〃5,判断定时器40if(Math,abs(endx-ele.offsetLeft)<=Math.abs(step)){clearinterval(ele.timer);//6.拉到终点ele.style,left=endx+〃px〃;}),50)}</script></body></html>第十章编程习题答案4、编程题<!DOCTYPEhtml><htmllang=〃en〃><head><metacharset二〃UTF-8〃〉<title>页面评价等级〈/title》<style>*{margin:0;padding:0;),box{width:500px;height:200px;margin:lOpxauto;border:Ipxsolid#c9c9e3;41h3{width:100%;height:60px;line-height:60px;background-color:#c9e3e3;text-indent:lem;}.like{width:100%;height:140px;background-color:#c9e3c9;display:flex;),likea{flex:25%;text-decoration:none;text-align:center;},likeaimg{display:block;width:50px;height:50px;margin:20pxauto5px;),likeaspan(display:block;font-size:16px;color:#666;42</style></head><body><divclass=〃box"〉<h3>您愿意向朋友推荐本篇文章吗？</h3><divclass二〃like"〉<ahref=〃#〃><imgsrc=z，../image/like-1.pngz，alt=〃〃〉<span>非常不愿意</span></a><ahref=〃#〃><imgsrc=〃・・/image/like_2・png〃alt=〃〃>〈span〉不愿意〈/span></a><ahref=，，#，，><imgsrc=/，../image/like-3.pngz，alt=〃〃><span>愿意〈/span></a><ahref=〃#〃><imgsrc=〃・・/image/like-4・png〃alt=〃〃〉<span>非常愿意〈/span〉</a></div></div></body></html>43</div></body></html>第三章编程习题答案4、编程题<!DOCTYPEhtml><htmllang=〃

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论