js课程设计设计报告

济南大学 课程设计报告课程设计报告学 院： 信息科学与工程学院 专 业： 计算机科学与技术（软件外包方向）班 级： 计软1306 学 号： 学生姓名： 徐翔 指导教师： 李崇威 课程名称： web客户端编程技术 设计名称： 我的博客 24一、 设计内容及要求（1）运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面（2）使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误首页设置导航栏，命名为index.html（3）利用CSS技术对网站进行布局，网站风格统一，灵活运用JavaScript使网页生动 （4）要经过至少两种主流浏览器的测试，最终检查时要配置Web服务器发布出来访问设计结束后上交报告（纸质和电子版）、源代码二、 设计思路全部包括七个网页，首页:介绍了我的进本信息，和网站的基本信息。关于我：详细介绍了我的各种信息奥。慢生活：介绍了我的一些生活理念。谁言碎语：类似说说一样是我的一些语录。模板分享：介绍了 我自己的一些小网站。（百度云分享）。学无止境：推介了一些图书。留言板：没有发布，还无法实现。三、 设计结果及分析1、主页：（1）背景和头像（2）文章推荐（3）一些好的网站的链接（4）天气显示（百度的代码）（5）登录2、关于我：（1）主要的个人生活简介 （2）主要的身份简介 （3）网页简单介绍（很多的是虚拟的） 3、慢生活： （1）一些程序员的文章推荐。 （2）个人小日记的推荐和网上的文件的链接 （3）点击排行链接（信息来自网络）3、碎言碎语：（1）惹人平时的心情记录 （2）右侧的是心情发表的时间 （3）左侧是时间学无止境：最新技术的一个更新右侧是技术分享的一个分类链接左侧是技术的详细信息四、 总结首先是复习了以前学过的css、html知识，又把js的只是更进一步的理解掌握，为了达到更好的效果，又学了好多html5和css3的知识。刚开始做了好几次都有重新做，因为结构又有新的问题，通过这车让我更明白先设计好再开始编写代码，磨刀不误砍柴工页面的布局不是动画越多越好，在最合适的地方使用合适的演示，事半功倍。五、 附录（源代码）个人博客#loginAposition:fixed;width:100%;height:100%;top:-0px;left:0px;z-index:100;background:rgba(100,100,100,0.5);#loginBposition:relative;width:300px;height:300px;border-radius:150px;margin:0px auto;top:30%;background:rgba(13,19,26,0.7);#loginCposition:relative;width:300px;height:300px;left:60px;top:80px;font-size:20px;color:#;/*background:#00cc00;*/#youposition:absolute;width:140px;height:50px;left:90px;top:10px;font-size:30px;color:#;#btnwidth:140px;height:30px;border-radius:20px;background:rgba(33,119,199,0.5);#btn:hoverbackground:rgba(253,233,87,0.5);window.onload=function()var btn=document.getElementById(btn);var name=document.getElementById(name);var age=document.getElementById(age);var i=1;btn.onclick=function()if(name.value=)alert(姓名不得为空);name.focus();i=0;if(age.value=|isNaN(age.value)alert(年龄不合法);age.focus();i=0;var b=document.getElementById(b);var g=document.getElementById(g);/if(!b.selected&!b.selected)/alert(性别必须选择);/i=0;/if(i=1)var kk=document.getElementById(loginA);kk.style.display=none; 首页Protal关于我About慢生活Life碎言碎语Doing我的相册Share学无止境LearnGustbook 游客登记name:   age:     男女  打了死结的青春，捆死一颗苍白绝望的灵魂。 为自己掘一个坟墓来葬心，红尘一梦，不再追寻。 加了锁的青春，不会再因谁而推开心门。 徐翔 个人博客生活在于分享 文章推荐 我是程序员，这是我的生活 我是程序员，这是我的生活 阅读全文 2015-11-04作者：徐翔个人博客：程序人生 程序员请放下你的技术情节，与你的同伴一起进步 我是程序员，这是我的生活 阅读全文 2015-12-04作者：徐翔：程序人生 程序员请放下你的技术情节，与你的同伴一起进步 如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展. 阅读全文 2015-11-04作者：徐翔程序人生 程序员请放下你的技术情节，与你的同伴一起进步 如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展. 阅读全文 2015-11-04作者：徐翔程序人生 程序员请放下你的技术情节，与你的同伴一起进步 如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展. 阅读全文 2015-11-04作者：徐翔程序人生 最新文章 Column 三栏布局 个人网站模板 with love for you 个人网站模板 免费收录网站搜索引擎登录口大全 做网站到底需要什么? 企业做网站具体流程步骤 建站流程篇教你如何快速学会做网站 box-shadow 阴影右下脚折边效果 打雷时室内、户外应该需要注意什么 点击排行 Column 三栏布局 个人网站模板 with love for you 个人网站模板 免费收录网站搜索引擎登录口大全 做网站到底需要什么? 企业做网站具体流程步骤 友情链接 个人博客 谢泽文个人博客 3DST技术网 思衡网络 document.getElementById(bdshell_js).src = /static/js/shell_v2.js?cdnversion= + Math.ceil(new Date()/) Design by DanceSmile 只属于我的博客2015、12、32 爱学习爱生活徐翔个人博客网站 首页Protal关于我About慢生活Life碎言碎语Doing我的相册Share学无止境LearnGustbook 像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。网站首页关于我 Just about me 徐翔，男。从搬砖一样的生活方式换成了现在有“单”而居的日子。当然这个单不是单身的单。人生就是一个得与失的过程，而我却是一个幸运者，失去的永远比得到的多。生活的压力迫使我放弃了轻松的前台接待，放弃了体面的编辑，换来虽有些蓬头垢面的工作，但是我仍然很享受那些熬得只剩下黑眼圈的日子，因为我在学习使用Dreamweaver、c#、JSP.中激发了兴趣，然后越走越远. 还要特别感谢一个人，是我的老师。他是我的百科，我不会的，他会，最后我还是不会。博客能做到今天这样，一半都有他的功劳。他不仅仅支持我的事业作为我有力的经济后盾，。 About my blog 域 名：创建于2015年12月25日 服务器：Tomcat6服务器购买空间 备案号： 程 序：js 网名：DanceSmile | 即步非烟 姓名：徐翔 生日：1993/09、25 籍贯： 现居： 职业：学生 喜欢的书：红与黑红楼梦 喜欢的音乐：burningjust one last dance相思引 Design by DanceSmile 蜀ICP备号-1 网站统计实用的全屏相册展示-妙味课堂-window.onload = function()var oPrev = document.getElementById(prev);var oNext = document.getElementById(next);var oPlay = document.getElementById(play);var oImg = document.getElementById(images);var _Img = document.getElementById(img);var _aImg = document.getElementById(img02)var aDiv = _Img.getElementsByTagName(div);var aImg = oImg.getElementsByTagName(img);var oPrevSm = document.getElementById(prevSm);var oNextSm = document.getElementById(nextSm);var thisImg = document.getElementById(length);var length = document.getElementById(thisImg);var oLayer = document.getElementById(layer);var aLayerImg = oLayer.getElementsByTagName(img);var oClose = document.getElementById(close);var oAlbum = document.getElementById(album);var iNow = 0;var timer = null;var play = 0;var zIndex = 3;function initial()/初始化oImg.style.height = document.documentElement.clientHeight + px;for(var i=0;iaDiv.length;i+)aDivi.style.width = document.documentElement.clientWidth + px;aDivi.style.height = document.documentElement.clientHeight + px;for(var i=0;iaImg.length;i+)aImgi.style.width = document.documentElement.clientWidth + px;/图片个数初始化length.innerHTML = aLayerImg.length;thisImg.innerHTML = iNow+1;oImg.style.width = document.documentElement.clientWidth;oImg.style.height = document.documentElement.clientHeight;oLayer.style.left = (document.documentElement.clientWidth - oLayer.offsetWidth)/2 + pxoLayer.style.top = (document.documentElement.clientHeight - oLayer.offsetHeight)/2 + pxoPrevSm.src = aLayerImgaLayerImg.length-1.src;oNextSm.src = aLayerImgiNow+1.src;initial();window.onresize = initial;for(var i=0; iaLayerImg.length;i+)aLayerImgi.index = i;aLayerImgi.onclick = function()_aImg.src = this.src;oLayer.style.display = none;iNow = this.index;imgClick();startMove(oLayer, opacity:0,function()startMove(oAlbum, opacity:100);oClose.onclick = function()oLayer.style.display = none;startMove(oAlbum, opacity:100)oAlbum.onclick = function()oLayer.style.display = block;oLayer.style.filter=alpha(opacity:100);oLayer.style.opacity=1;startMove(oAlbum, opacity:0);initial();function imgClick()_aImg.style.filter=alpha(opacity:0);_aImg.style.opacity=0;if(iNow=0)oPrevSm.src = aLayerImgaLayerImg.length-1.src;oNextSm.src = aLayerImgiNow+1.src;thisImg.innerHTML = iNow+1;_aImg.src = images/+ (iNow+1) +.jpg;else if(iNow=aLayerImg.length-1)oNextSm.src = aLayerImg0.src;oPrevSm.src = aLayerImgaLayerImg.length-2.src;thisImg.innerHTML = iNow+1;_aImg.src = images/ + (iNow+1) + .jpg;elseoPrevSm.src = aLayerImgiNow-1.src;oNextSm.src = aLayerImgiNow+1.src;thisImg.innerHTML = iNow+1;_aImg.src = images/+ (iNow+1) +.jpg;startMove(_aImg,opacity:100);oNextSm.onclick = oNext.onclick = function()if(iNow=aLayerImg.length-1)iNow=0;elseiNow+;imgClick();oPrevSm.onclick = oPrev.onclick = function()if(iNow=0)iNow=aLayerImg.length-1;elseiNow-;imgClick();oPlay.onclick = function()play+;if(play%2=1)this.src = img/play_dull.png;timer = setInterval(function()if(iNow=aLayerImg.length-1)iNow=0;elseiNow+;/thisImg.innerHTML = iNow+1;imgClick();,2500)elsethis.src = img/pause_dull.png;clearInterval(timer);/交互效果oNext.onmousedown = function()this.src = img/forward.png;oNext.onmouseup = function()this.src = img/forward_dull.png;oPlay.onmousedown = function()this.src = img/pause.png;oPlay.onmouseup = function()this.src = img/pause_dull.png;this.src = img/play_dull.png;oPrev.onmousedown = function()this.src = img/back.png;oPrev.onmouseup = function()this.src = img/back_dull.png;charset gb2312;.banner background: url(./images/banner_top.jpg) top center; height: 265px; overflow: hidden .texts width: 350px; line-height: 26px; margin: 60px 0 0 20px; float: left; font-size: 14px; .texts p -webkit-transform: translate(60px); -moz-transform: translate(60px); -o-transform: translate(60px); -ms-transform: translate(60px); transform: translate(60px); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(180, 151, 151, 0.3); .texts p:nth-child(1) -webkit-animation: animations 3s ease-out 1s backwards; -moz-animation: animations 3s ease-out 1s backwards; -o-animation: animations 3s ease-out 1s backwards; -ms-animation: animations 3s ease-out 1s backwards; animation: animations 3s ease-out 1s backwards; .texts p:nth-child(2) -webkit-animation: animations 3s ease-out 4s backwards; -moz-animation: animations 3s ease-out 4s backwards; -o-animation: animations 3s ease-out 4s backwards; -ms-animation: animations 3s ease-out 4s backwards; animation: animations 3s ease-out 4s backwards; .texts p:nth-child(3) -webkit-animation: animations2 5s ease-in-out 7s backwards; -moz-animation: animations2 5s ease-in-out 7s backwards; -o-animation: animations2 5s ease-in-out 7s backwards; -ms-animation: animations2 5s ease-in-out 7s backwards; animation: animations2 5s ease-in-out 7s backwards; -webkit-keyframes animations 0% -webkit-transform:translate(0);opacity:0; 50% -webkit-transform:translate(30px);opacity:.5; 100% -webkit-transform:translate(60px);opacity:1;-moz-keyframes animations 0% -moz-transform:translate(0);opacity:0; 50% -moz-transform:translate(30px);opacity:.5; 100% -moz-transform:translate(60px);opacity:1;-o-keyframes animations 0% -o-transform:translate(0);opacity:0; 50% -o-transform:translate(30px);opacity:.5; 100% -o-transform:transl