《软件开发与创新课程设计》第一次作业：软件二次开发-编程知识

《软件开发与创新课程设计》第一次作业：软件二次开发

news/2025/2/27 0:14:28/文章来源:https://www.cnblogs.com/cardinal2352608/p/18728354

一、项目名称与来源
该项目名为体育新闻信息查询系统，源码来自同学。

二、目的
项目体育新闻信息查询系统的目的是基于Java和JavaScript创建一个能够查询体育新闻的web系统。本次作业的目的是基于该系统的基础上进行二次开发。

三、部分原代码
1.体育新闻网

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体育新闻网</title><link rel="stylesheet" href="D:\CCJAVA\程序\Sports_event_news\css\picture.css">
</head>
<body><h1>体育新闻网</h1><div class="box"><div class="box_img"><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A204.html" target="_blank"><img src="D:\CCJAVA\程序\Sports_event_news\img\fanzhendong.jpg" width="700" height="460"></a></div><div class="box_img"><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A201.html" target="_blank"><img src="D:\CCJAVA\程序\Sports_event_news\img\zhenqinwen.jpg" width="700" height="460"></a></div><div class="box_img"><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A203.html" target="_blank"><img src="D:\CCJAVA\程序\Sports_event_news\img\panzhanle.jpg" width="700" height="460"></a></div><div class="box_img"><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A202.html" target="_blank"><img src="D:\CCJAVA\程序\Sports_event_news\img\tianjinnvpai.jpg" width="700" height="460"></a></div></div></div><div class="box_2"><p><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A202.html">女排世俱杯：科内利亚诺女排夺冠 天津女排摘银创历史</a></p><p><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A203.html">2024年中国运动员获194个世界冠军 创历年之最</a></p><p><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A204.html">樊振东宣布：退出世界排名 但不会退役</a></p><p><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A201.html">郑钦文追梦之路繁花生</a></p>    <div id="box__"><input type="text" id="1" placeholder="Search"/></div><div id="box_"><input type="text" class="search" id="3" value="Search"/></div></div><script type="text/javascript" src="D:\CCJAVA\程序\Sports_event_news\jquery-3.7.1.js"></script><script type="text/javascript">$(function(){var Search=document.getElementById("1"); $(".search").click(function(){//绑定点击事件if(Search.value=="郑钦文追梦之路繁花生"){location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A201.html";}else if(Search.value=="樊振东宣布：退出世界排名 但不会退役"){location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A204.html";}else if(Search.value=="2024年中国运动员获194个世界冠军 创历年之最"){location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A203.html";}else if(Search.value=="女排世俱杯：科内利亚诺女排夺冠 天津女排摘银创历史"){location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A202.html";}else if(Search.value=="郑钦文"){location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%9F%A5%E8%AF%A2%E7%BB%93%E6%9E%9C01.html";}else{alert("未能查询到相关结果，请重新输入");}})})</script>
</body>
</html>

2.新闻页面

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>郑钦文追梦之路繁花生</title><link rel="stylesheet" href="D:\CCJAVA\程序\Sports_event_news\css\news.css">
</head>
<body><div>    <a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E4%BD%93%E8%82%B2%E6%96%B0%E9%97%BB%E7%BD%91.html">体育新闻网</a>><a href="file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E6%96%B0%E9%97%BB%E9%A1%B5%E9%9D%A201.html">正文</a><h1>郑钦文追梦之路繁花生</h1><hr><span>2024年12月25日 16:19 来源：北京晚报</span><hr><p>　　郑钦文的2024年，关键词有诸多选项，比如突破、冠军、创历史……</p><p>　　这一年，郑钦文一直在追梦，个人成就也达到了前所未有的高度。年初，她在澳网夺得大满贯女单亚军；夏天，她代表祖国勇夺奥运金牌，成为全民偶像，推动国内网球运动热度进一步提升，一度形成“钦文现象”。</p><p>　　郑钦文追逐梦想，人们“追随”郑钦文。梦想传递间，中国网球运动与青年一代在这一年勾勒出相伴成长的美好图景。    </p><p>　　追梦·有传承    </p><p>　　郑钦文高光的2024年是从澳网开始的。在罗德·拉沃尔球场，人们又一次见证中国“金花”闯进女单决赛，先于郑钦文之前解锁这一成就的，是她的偶像李娜。</p><p>　　跨越十年的激励，这一刻完成传承。</p><p>　　2014年，李娜在罗德·拉沃尔夺冠，成为首位获得澳网单打冠军的亚洲球员。彼时，不满12岁的郑钦文在电视机前见证这一刻，并在心中种下了梦想的种子。10年后，梦想的种子盛开成耀眼繁花。沿着前辈的足迹，郑钦文追寻、突破，还取得了偶像不曾触及的荣誉——奥运会网球女单冠军。</p><p>　　职业生涯首次闯进大满贯决赛那年，李娜29岁，郑钦文21岁。与前辈相比，郑钦文更早地名扬四海，这背后与她所处的时代环境密不可分。</p><p>　　少年时，在家庭的支持下，郑钦文沿着前辈的足迹拜访名师，而后闯荡海外接受国际化培训。成名前，地方体育部门为郑钦文提供了资金、保障等全方位支持。进入职业赛场后，她展现出迅猛的上升势头，短短三年时间，世界排名已稳居前十。</p><p>　　国家体育总局网球运动管理中心主任白喜林说，中国网球的进步和突破并非偶然，而是在国家经济社会快速发展的基础上，尊重项目发展规律，走上正确的道路，多年积累的结果。</p><p>　　郑钦文作为中国网球新一代的代表，可以说是站在了巨人的肩膀上。当前中国网球项目的优异成绩、蓬勃发展离不开一代代怀揣梦想的网球人前赴后继，为自己也为后辈蹚出一条更加光明的路。从李娜到郑钦文，中国网球事业完成了薪火传承。</p><p>　　追梦·不停歇</p><p>　　“我很累，但是如果告诉我需要为国家再打一场三小时的比赛，我仍然愿意。”巴黎奥运会网球女单半决赛上，顶着超过30摄氏度的高温，郑钦文拼尽全力击败斯瓦泰克后这样说。朴实话语展现拳拳赤子心。而在这场比赛之前，她已经历了两场超过3小时的鏖战。</p><p>　　奥运夺金的一刻，郑钦文躺倒在地，泪水夺眶而出。“我一直很羡慕那些可以创造历史的人，如今我也成为其中一员。”她说。</p><p>　　这一年，郑钦文追梦不停歇。在奥运会后，她将目光锁定WTA年终总决赛。这也是她一直以来的目标。</p><p>　　于是，观众一次又一次见证郑钦文的顽强斗志——在美网女单八分之一决赛与维基奇鏖战至当地时间午夜2时艰难取胜，追平自己在美网的最佳战绩；在中网女单半决赛一次救球中不慎摔倒时，还专注地盯着球奋力挥拍；在武网女单决赛前吃退烧药坚持上场……</p>    <p>　　短短一个月有余，郑钦文连续征战美网、中网、武网，拼尽全力，最终如愿站上年终总决赛的舞台，成为年度表现最好的八位球员之一。</p><p>　　在利雅得，郑钦文与小自己两岁的高芙会师年终总决赛的决赛。这也是继2004年以来，WTA年终总决赛最年轻的争冠阵容。最终她获得亚军，在颁奖仪式上抬头望向漫天飘落的金色彩带，伸手想要抓住两片——这是郑钦文留给2024赛季的最后剪影，对于亚军，她心有不甘。</p><p>　　追梦·向未来</p><p>　　郑钦文的横空出世，让中国网球再次沸腾起来，也在很多孩子心中种下了新的种子。</p><p>　　今年网球“中国赛季”期间，中网、上海大师赛、武网三大赛事的观众人数与门票收入均创新高。这一年，无数青少年带着“成为下一个郑钦文”的梦想，带上球拍走向球场。</p><p>　　人们追逐郑钦文，因为她的成绩，也因她闪耀的人格魅力。</p><p>　　郑钦文很自信，她说，年轻一代平视世界的同时代表了中国的进步，只有平视这个世界，才能把真正的、完整的自己更强地发挥出来；她也坦率，年终总决赛后，她主动向现场的球迷致歉，表示自己在场上的一声怒吼是一时没控制好情绪；她亦霸气，表示“Queen Wen(女王文)”这个昵称对自己是实至名归；她也会自我调侃，在武网赛后说：“年初排名世界第七位，奋斗了一年还在第七。”</p><p>　　出众的成绩、自信的谈吐、阳光的样貌，让郑钦文“破圈”，她自信、率真、张扬的个性，展现出新一代中国运动员平视世界、拥抱世界的自信、活力，成为青少年的理想模样。</p><p>　　被前辈鼓舞过的郑钦文，也在努力成为更年轻一代的榜样。“请勇敢地去做梦。只有先做梦，你才能够有一个目标去实现。追梦途中，可能会有艰辛、困难和失败，但一切努力的过程都是通往成功的基石。”郑钦文这样与大学生分享心得。</p><p>　　十年前，少女郑钦文种下的梦想种子已生出繁花。22岁的郑钦文未来仍有无限可能，厚积薄发的中国网球未来同样值得期待。本报记者 卓然 文 </p><p id="last">【编辑:刘欢】</p></div>
</body>
</html>

3.picture.css

点击查看代码

a{text-decoration: none;}body{background-image: url(3.jpg);background-size: 100% auto;
}
#box__>input{background-color: #FFFFFF00;border: 0px;border-bottom: 3px #000000 solid;width: 250px;height: 40px;text-align: initial;font-size: 18px;padding: 0px 40px;float: left;outline: none;
}
#box_>input{width: 270px;height: 45px;line-height: 40px;color: #ffffff;margin-top: 30px;margin-left: 40px;font-size: 20px;background-color: rgb(0, 153, 143);border-radius: 30px;border: 0px;text-align: center;
}
.box{float: left;width: 700px;height: 460px;position: relative;background: url(D:\CCJAVA\程序\Sports_event_news\background\background1.jpg);}.box_2{width: 40%;font-weight: bold;font-size: 20px;float: right;}.box_left{position: absolute;width: 35px;height: 70px;color: #ccc;top: 195px;border-radius: 0 5px 5px 0;text-align: center;line-height: 70px;font-size: 27px;}.box_left:hover{background-color: #000050;color: #fff;}.box_right{position: absolute;width: 35px;height: 70px;color: #ccc;top: 195px;border-radius: 5px 0 0 5px;text-align: center;line-height: 70px;font-size: 27px;right: 0;}.box_right:hover{background-color: #000050;color: #fff;}

四、源码运行结果

1.查询界面

2.查询失败

3.查询成功

4.新闻界面

五、创新与改进
1.向体育新闻网及picture.css部分增加的代码，实现轮播图效果，以及按钮控制图片轮转

点击查看代码

/*第一部分*/
<ul><li class="botton"></li><li class="botton"></li><li class="botton"></li><li class="botton"></li></ul>/*第二部分*/
$(function(){var index=0;//标记获取当前图片var f=setInterval(function(){//定时器每隔三秒显示下一张图片if(index==3){index=0;$(".box_img").css("opacity","0");$(".box_img").eq(index).css("opacity","0.7");//jquery遍历方法eq()$(".botton").css("background-color","#ccc")$(".botton").eq(index).css("background-color","#fff")}else{index++;$(".box_img").css("opacity","0");$(".box_img").eq(index).css("opacity","0.7");$(".botton").css("background-color","#ccc")$(".botton").eq(index).css("background-color","#fff")}},3000)$(".box_left").click(function(){//绑定点击事件if(index==0){index=3;$(".box_img").css("opacity","0");$(".box_img").eq(index).css("opacity","0.7");}else{index--;$(".box_img").css("opacity","0");$(".box_img").eq(index).css("opacity","0.7");}})$(".box_right").click(function(){if(index==3){index=0;$(".box_img").css("opacity","0");$(".box_img").eq(index).css("opacity","0.7");}else{index++;$(".box_img").css("opacity","0")$(".box_img").eq(index).css("opacity","0.7");}})$(".botton").click(function(){var index_n=$(this).index();index=index_n;$(".box_img").css("opacity","0")$(".box_img").eq(index).css("opacity","0.7");$(".botton").css("background-color","#ccc")$(".botton").eq(index).css("background-color","#fff")})})/*第三部分*/
.box_img:nth-child(1){opacity: 0.7;}.box_left{position: absolute;width: 35px;height: 70px;color: #ccc;top: 195px;border-radius: 0 5px 5px 0;text-align: center;line-height: 70px;font-size: 27px;}.box_left:hover{background-color: #000050;color: #fff;}.box_right{position: absolute;width: 35px;height: 70px;color: #ccc;top: 195px;border-radius: 5px 0 0 5px;text-align: center;line-height: 70px;font-size: 27px;right: 0;}.box_right:hover{background-color: #000050;color: #fff;}.box_zhiding>ul{padding: 0;margin: 0;list-style: none;}.box_zhiding li{width: 14px;height: 14px;border-radius: 100%;background-color: #ccc;float: left;margin-right: 10px;}.box_zhiding li:nth-child(1){background-color: #fff;}.box_zhiding{position: absolute;bottom: 30px;right: 20px;}.box_zhiding li:hover{background-color: #fff;}

2.增加登录页面，并实现用户登录功能，使其输入密码和用户名后显示对应弹窗

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><link rel="stylesheet" href="D:\CCJAVA\程序\Sports_event_news\css\denlu.css">
</head>
<body><div id="box"><div></div><div><div><h2>Sign in Here</h2></div><div><input type="text" id="1" placeholder="Username"/></div><div><input type="password" id="2" placeholder="Password"/></div><div><input type="text" class="signin" id="3" value="Sign in"/></div><div><h3>Forget Password</h3></div></div></div><script type="text/javascript" src="D:\CCJAVA\程序\Sports_event_news\jquery-3.7.1.js"></script><script type="text/javascript">$(function(){var Username=document.getElementById("1"); var Password=document.getElementById("2");$(".signin").click(function(){//绑定点击事件if(Username.value=="yfx" && Password.value=="123456"){alert("登录成功");location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E4%BD%93%E8%82%B2%E6%96%B0%E9%97%BB%E7%BD%91.html";}else{alert("输入错误，请重试");location.href = "file:///D:/CCJAVA/%E7%A8%8B%E5%BA%8F/Sports_event_news/src/main/webapp/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2.html";}})})</script>
</body>
</html>/*denlu.css*/
*{margin: 0px auto;
}
body{background-image: url(1.jpg);background-size: 100% auto;
} 
#box{border:15px rgba(255,255,255,0.25) solid;width: 840px;height: 500px;background-color: #ffffff00;margin-top: 200px;border-radius: 10px;
}
#box>div{width: 420px;height: 500px;float: left;
}
#box>div:nth-child(1){background-image: url(2.jpg);background-size: 420px 500px;
}
#box>div:nth-child(2){background-color: rgba(255,255,255,0.7);
}
#box>div:nth-child(2)>div:nth-child(1){margin-top: 80px;margin-left: 20px;
}
#box>div:nth-child(2)>div:nth-child(2){margin-top: 30px;width: 400px;height: 40px;
}
#box>div:nth-child(2)>div:nth-child(2)>input{background-color: #FFFFFF00;border: 0px;border-bottom: 3px #000000 solid;width: 250px;height: 40px;text-align: initial;font-size: 18px;padding: 0px 40px;float: left;outline: none;
}
#box>div:nth-child(2)>div:nth-child(3){margin-top: 30px;width: 400px;height: 40px;
}
#box>div:nth-child(2)>div:nth-child(3)>input{background-color: #FFFFFF00;border: 0px;border-bottom: 3px #000000 solid;width: 250px;height: 40px;text-align: initial;font-size: 18px;padding: 0px 40px;float: left;outline: none;
}
#box>div:nth-child(2)>div:nth-child(4)>input{width: 270px;height: 45px;line-height: 40px;color: #ffffff;margin-top: 30px;margin-left: 40px;font-size: 20px;background-color: red;border-radius: 30px;border: 0px;text-align: center;
}
#box>div:nth-child(2)>div:nth-child(5){margin-top: 30px;margin-left: 40px;
}

六、改进结果
1.登录界面