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";
}
}
}