js课程设计设计报告.docx
《js课程设计设计报告.docx》由会员分享，可在线阅读，更多相关《js课程设计设计报告.docx（37页珍藏版）》请在冰豆网上搜索。
js课程设计设计报告
课程设计报告
学院：
信息科学与工程学院
专业：
计算机科学与技术（软件外包方向）
班级：
计软1306
学号：
20131214153
学生姓名：
徐翔
指导教师：
李崇威
课程名称：
web客户端编程技术
设计名称：
我的博客
一、设计内容及要求
（1）运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面
（2）使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误
首页设置导航栏，命名为index.html
（3）利用CSS技术对网站进行布局，网站风格统一，灵活运用JavaScript使网页生动
（4）要经过至少两种主流浏览器的测试，最终检查时要配置Web服务器发布出来访问
设计结束后上交报告（纸质和电子版）、源代码
二、设计思路
全部包括七个网页，
首页:
介绍了我的进本信息，和网站的基本信息。
关于我：
详细介绍了我的各种信息奥。
慢生活：
介绍了我的一些生活理念。
谁言碎语：
类似说说一样是我的一些语录。
模板分享：
介绍了我自己的一些小网站。
（XX云分享）。
学无止境：
推介了一些图书。
留言板：
没有发布，还无法实现。
三、设计结果及分析
1、主页：
（1）背景和头像
（2）文章推荐
（3）一些好的网站的链接
（4）天气显示（XX的代码）
（5）登录
2、关于我：
（1）主要的个人生活简介
（2）主要的身份简介
（3）网页简单介绍（很多的是虚拟的）
3、慢生活：
（1）一些程序员的文章推荐。
（2）个人小日记的推荐和网上的文件的链接
（3）点击排行链接（信息来自网络）
3、碎言碎语：
（1）惹人平时的心情记录
（2）右侧的是心情发表的时间
（3）左侧是时间
学无止境：
最新技术的一个更新
右侧是技术分享的一个分类链接
左侧是技术的详细信息
四、总结
首先是复习了以前学过的css、html知识，又把js的只是更进一步的理解掌握，为了达到更好的效果，又学了好多html5和css3的知识。
刚开始做了好几次都有重新做，因为结构又有新的问题，通过这车让我更明白先设计好再开始编写代码，磨刀不误砍柴工
页面的布局不是动画越多越好，在最合适的地方使用合适的演示，事半功倍。
五、附录（源代码）
doctypehtml>
个人博客
#loginA
{
position:
fixed;
width:
100%;
height:
100%;
top:
-0px;
left:
0px;
z-index:
100;
background:
rgba（100,100,100,0.5）;
}
#loginB
{
position:
relative;
width:
300px;
height:
300px;
border-radius:
150px;
margin:
0pxauto;
top:
30%;
background:
rgba（13,19,26,0.7）;
}
#loginC
{
position:
relative;
width:
300px;
height:
300px;
left:
60px;
top:
80px;
font-size:
20px;
color:
#959544;
/*background:
#00cc00;*/
}
#you
{
position:
absolute;
width:
140px;
height:
50px;
left:
90px;
top:
10px;
font-size:
30px;
color:
#959544;
}
#btn
{
width:
140px;
height:
30px;
border-radius:
20px;
background:
rgba（33,119,199,0.5）;
}
#btn:
hover
{
background:
rgba（253,233,87,0.5）;
}
window.onload=function（）
{
varbtn=document.getElementById（"btn"）;
varname=document.getElementById（"name"）;
varage=document.getElementById（"age"）;
vari=1;
btn.onclick=function（）
{
if（name.value==""）
{
alert（"姓名不得为空"）;
name.focus（）;
i=0;
}
if（age.value==""||isNaN（age.value））
{
alert（"年龄不合法"）;
age.focus（）;
i=0;
}
varb=document.getElementById（"b"）;
varg=document.getElementById（"g"）;
//if（!
b.selected&&!
b.selected）
//{
////alert（"性别必须选择"）;
//i=0;
//}
if（i==1）
{
varkk=document.getElementById（"loginA"）;
kk.style.display="none";
}
}
}
升级会员 