课程作业2-大一纯网页课程作业——垃圾分类网站设计

最新推荐文章于 2024-03-05 12:58:22 发布

陈弟弟

最新推荐文章于 2024-03-05 12:58:22 发布

阅读量8.3k

点赞数 25

分类专栏：课程作业文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_41446786/article/details/104440515

版权

课程作业专栏收录该内容

4 篇文章 0 订阅

订阅专栏

“垃圾分类网”项目文档

源码地址： https://download.csdn.net/download/weixin_41446786/12358553

一、项目概述

1、设计思路

本次网页设计主题是以宣传垃圾分类为主题，因此秉着平台需要突出宣传垃圾分类、提高垃圾分类意识的想法，网页共分6个页面，第一个是整体的一个页面“首页”，主要是后面5个页面的基体；第二个页面是“垃圾分类”页面，垃圾分类页面主要是让垃圾分类变得更清晰，将垃圾分类的知识讲解一遍；第三个界面是“垃圾宝贝”，这个页面是教如何利用垃圾制作一个工艺品，对垃圾再利用做一个向导；第四个页面是“主题活动”，本界面主要是宣传和互动；第五个界面是“最新新闻”，这个界面将提供垃圾分类的一些最新新闻；最后一个界面“关于我们”是对本平台的一个介绍以及宣讲。
2、模块规划
（1）首页界面
本界面作为整个平台的基体，内容比较丰富，首先第一部分是本平台的宣传语；第二部分是垃圾分类标识，这里实现一个平台界面跳转，点击标识图将跳转到“垃圾分类”界面；第三部分是最新新闻，这里的新闻是“最新新闻”界面的浓缩，点击这里的新闻能够实现对应的新闻链接跳转；接着是一个标签本，这里是设置的是一个垃圾分类常见问题，运用了文字滚动的知识；标签本下面是制造的一个小事件：垃圾分类袋制作大赛，在这里放这个目的是让页面更为丰富。
（2）垃圾分类界面
整体分为两个部分，第一部分是进行垃圾分类知识的解读，说明清楚各类垃圾的概念，包括什么东西以及投放要求，在这一部分的文字解读上面是一个轮播图，轮播图的每一张图片具备页面内跳转的功能，能够跳转到对应的类别垃圾讲解；第二部分是一个图片框展示，这里的图片宣传的是当我们学会垃圾分类能够帮助我们净化地球的每一片土地，还地球一片净土。
（3）垃圾宝贝界面
整体分为两个部分，第一部分是进行垃圾再利用工艺品的步骤讲解，这里点击的每一张图片会展示在第二部分的展示框里；第二部分是一个图片框展示，展示的图片是左边每个步骤点击的图片的详细大图展示。
（4）主题活动界面
整体分为两个部分，第一部分是一个宣传短片；第二部分是一个小测试，这个小测试具备答题计算成绩的功能，你如果答完所有题目他会将成绩和正确答案展示给你。
（5）最新新闻界面
新闻界面相对比较简单，这里主要是展示几个垃圾分类的最新新闻，当点击对应的新闻会实现相应的新闻跳转。
（6）关于我们界面
对本平台的一个介绍以及宣讲。
3、整体框架模块图
图1-1整体框架模块图

二、关键代码介绍

1、大致框架布局
大致框架分为上下两个大框架，下面是大框架代码。

<body>
<div id="content"><span c...
<div class="clear"></div>
<div class="footer"><div...
</body>`

（1）上框架代码
上框架分了两个span，logo floatl类放了logo图和top-links floatr类放了导航栏，接着是两个div框架，header类放了导航图片，另外content-box类的div放置的是本网页的主要内容。

<div id="content">
<span class="logo floatl">...
<span class="top-links flo...
<div class="clear"></div>
<div class="header"><div...
Rdiv class="content-box">...
</div>

（2）下框架代码
下框架代码主要是下面的导航栏，和上框架的导航栏效果相似，并声明一个版权。

<div class="footer">
    <div class="footer-links">
        <ul>
          <li><a href="index.html">首页</a></li>
       <li><a href="classblog.html">垃圾分类</a></li>
       <li><a href="classphoto.html">垃圾宝贝</a></li>
       <li><a href="personpage.html">主题活动</a></li>
       <li><a href="message.html">最新新闻</a></li>
       <li><a href="about.html">关于我们</a></li> 
        </ul>
        <div class="clear"></div>
       SISE &copy; ----------- 版权所有，盗版必究.
        </div>
         
</div>

2、首页部分界面
（1）第一个是跳转功能，网页跳转、视频网站跳转以及学校内网跳转；

<div class="drawing-section floatr">
   <h1>最新新闻</h1>
   <span class="second_heading">Latest news</span>
   <img src="images/news1.jpg" align="left" hspace="10" 
style="width:60px;height:auto;"/>        
<span class="news-title"><b><a href="http://news.southcn.com/gd/content/2019-12/09/content_189754790.htm">广东省生活垃圾分类工作推进会召开</a></b>
</span>
    <p>推进会在广州召开 李希马兴瑞王伟中出席.</p>  
<img src="images/news2.jpg"  hspace="10" align="left" 
style="width:60px;height:50px;"/> 
   <span class="news-title"><b>
<a href="https://v.qq.com/x/page/o3027tvwk2t.html">深圳智能垃圾分类，智能垃圾桶让垃圾分类更方便</a></b></span>
   <p>智能垃圾分类将会带来什么新的经济变化呢？</p>
	<img src="images/news4.jpg"  hspace="10" align="left" 
style="width:60px;height:65px;"/> 
   <span class="news-title"><b>
<a href="http://news.sise.com.cn/cms/6105.html">总务处、学生处前往广东轻工职业技术学院学习智能垃圾分类系统</a></b></span>
   <p>广州大学华软软件学院顺应“环保潮流”开展垃圾分类</p>
</div>

（2）实现文字滚动，鼠标移到的时候停止滚动，离开的时候滚动。

<marquee direction="up" height="190"
 οnmοuseοver="this.stop()" οnmοuseοut="this.start()">……</marquee>

3、垃圾分类界面代码
（1）关于轮播图的HTML代码

    <div class="inner"><!--轮播图-->
        <ul>
            <li><a href="#01"><img src="images/可1.jpg" alt=""></a></li>
            <li><a href="#01"><img src="images/可2.jpg" alt=""></a></li>
            <li><a href="#02"><img src="images/害1.jpg" alt=""></a></li>
            <li><a href="#02"><img src="images/害2.jpg" alt=""></a></li>
            <li><a href="#04"><img src="images/厨1.jpg" alt=""></a></li>
			<li><a href="#04"><img src="images/厨2.jpg" alt=""></a></li>
			<li><a href="#03"><img src="images/其他1.jpg" alt=""></a></li>
        </ul>
        <ol class="bar">
        </ol>
        <!--左右焦点-->
        <div id="arr">
             <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
</div>

（2）关于轮播图的JavaScript代码

<script>
    /**
     *
     * @param id  传入元素的id
     * @returns {HTMLElement | null}  返回标签对象，方便获取元素
     */
    function my$(id) {
        return document.getElementById(id);
    }
    //获取各元素，方便操作
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    //根据li个数，创建小按钮
    for(var i=0;i<list.length;i++){
        var liObj=document.createElement("li");
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
        //为按钮注册mouseover事件
        liObj.οnmοuseοver=function () {
            //先清除所有按钮的样式
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            animate(ulObj,-pic*imgWidth);
        }
    }
    //设置ol中第一个li有背景颜色
    olObj.children[0].className = "current";
    //克隆一个ul中第一个li,加入到ul中的最后=====克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    var timeId=setInterval(onmouseclickHandle,1000);
    //左右焦点实现点击切换图片功能
    box.οnmοuseοver=function () {
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.οnmοuseοut=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,1000);
    };
    right.οnclick=onmouseclickHandle;
    function onmouseclickHandle() {
        //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
        //所以,如果用户再次点击按钮,用户应该看到第二个图片
        if (pic == list.length - 1) {
            //如何从第6个图,跳转到第一个图
            pic = 0;//先设置pic=0
            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
        }
        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
        //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
        if (pic == list.length - 1) {
            //第五个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else {
            //干掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    left.οnclick=function () {
        if (pic==0){
            pic=list.length-1;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    };
 
    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            //获取元素的当前的位置,数字类型
            var current = element.offsetLeft;
            //每次移动的距离
            var step = 10;
            step = current < target ? step : -step;
            //当前移动到位置
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left = target + "px";
            }
        }, 10);
    }
</script>

4、垃圾宝贝部分代码
当点击相应的图片在对应的展示框展示对应的图片
（1）被点击的图片

<a href="images/001.jpg" target="ifr"><img src="images/001.jpg"/></a>
                         <div class="photo-text">步骤一：<br>准备好小黄人同色的毛线，然后还需要洗干净一个瓶子</div>

（2）图片展示框

<div class="events-section">
        <h1>查看详细制作图片</h1>
         <div class="second_heading">Look Detail</div><br>
			 <div id="detail">
				<iframe name="ifr" class="ifr" src="images/001.jpg" align="middle"></iframe>
			</div>
 </div>

5、主题活动部分代码
（1）测试题的HTML代码

<h1>分类比赛</h1>
        	<div class="second_heading">Cassified game</div>
			<div id="testSystem">
			<form id="form1" name="form1" method="post" action="">
				<h1>【单选题】每空20分</h1>
				<p id="problem">第一题：垃圾可以分成几类？</p>
				<label id="opa"><input type="radio" name="Option" value="A" />A.一类</label>
				<br />
				<label id="opb"><input type="radio" name="Option" value="B" />B.两类</label>
				<br />
				<label id="opc"><input type="radio" name="Option" value="C" />C.三类</label>
				<br />
				<label id="opd"><input type="radio" name="Option" value="D" />D.四类</label>
				<br />
				<input type="button" name="Submit" value="上一题" οnclick="showLastQuestion();"/>
				<input type="button" name="Submit" value="下一题" οnclick="showNextQuestion();"/>
				<input type="button" name="Submit" value="提交答案" οnclick="showResult();"/>
			</form>
			</div>

（1）测试题的JavaScript代码

<script>
//函数——用于创建对象
function createTest(question,optionA,optionB,optionC,optionD,answer)
{
	var o=new Object();
	o.question=question
	o.optionA=optionA;
	o.optionB=optionB;
	o.optionC=optionC;
	o.optionD=optionD;
	o.answer=answer;
	return o;
}
//初始化题库
var arr=new Array(5);
arr[0]=createTest("第一题：垃圾可以分成几类?","A.一类","B.两类","C.三类","D.四类","D");
arr[1]=createTest("第二题：下列哪个不属于厨余垃圾？","A.过期食品","B.剩饭剩菜","C.鱼刺和骨头","D.废弃的金属勺子","D");
arr[2]=createTest("第三题：下列哪些不属于可回收垃圾？","A.废铁丝、废铁","B.用过的餐巾纸、茶叶渣","C.玻璃瓶、废塑料","D.旧衣服、废报纸","B");
arr[3]=createTest("第四题：下列哪些不属于有害垃圾?","A.玻璃瓶","B.过期药品","C.废水银温度计","D.废旧电池","A");
arr[4]=createTest("第五题：擦鼻涕的纸应放入哪类垃圾桶里？","A.厨余垃圾","B.可回收垃圾","C.有害垃圾","D.其他垃圾","D");
//全局变量计数
var count=0;
var myAnswer=new Array(5);
for(var i=0;i<myAnswer.length;i++)
myAnswer[i]="无";

function getAnswer()
{ 
  // 获取名称为OPTION的所有单选项
  var getObjs = document.getElementsByName("Option");
  for(var i=0;i<getObjs.length;i++)
  {
     // 循环选中的选项，并记录到数组中
     if(getObjs[i].checked)
	 {
        myAnswer[count] = getObjs[i].value;
		//if(button.value=="下一题"||button.value=="提交答案")
		break;
     }
  }
  if(i==4)
    myAnswer[count]=="无";
}
function Print()
{
   var getObjs = document.getElementsByName("Option");
   if(myAnswer[count]!="无")
   {
     for(var i=0;i<getObjs.length;i++)
        if(getObjs[i].value==myAnswer[count])
	  {
		 getObjs[i].checked=true;
	     break;
      }
   }
	else
	  for(var i=0;i<getObjs.length;i++)
		 getObjs[i].checked=false
	var problem=document.getElementById("problem"); 
  	problem.firstChild.nodeValue=arr[count].question; 
  	var opa=document.getElementById("opa");
  	opa.lastChild.nodeValue=arr[count].optionA;
  	var opb=document.getElementById("opb");
  	opb.lastChild.nodeValue=arr[count].optionB;
 	var opc=document.getElementById("opc");
 	opc.lastChild.nodeValue=arr[count].optionC;	
  	var opd=document.getElementById("opd");
 	opd.lastChild.nodeValue=arr[count].optionD;
}
//上一题
function showLastQuestion()
{ 
  getAnswer();
  if(count<=0)
  {
    alert("当前是第一题！"); 
	count=0;
  }
  else
    count--;
  Print();//打印题目

//下一题
function showNextQuestion()
{ 
  getAnswer();
  if(count==5)
  {
	  alert("当前已是最后一题！");
	  count=4;
  }
  else
    count++; 
  Print();//打印题目
}
function showResult()
{
	getAnswer();
	for(var i=0;i<arr.length;i++)
	{
		if(myAnswer[i]=="无")
		  break;
	}
	if(i<arr.length)
	  alert("有未做题目，无法提交！");
	else
	{
	var score=0;
	var right="";
	var yours="";
	for(var i=0;i<arr.length;i++)
	{
		right+=arr[i].answer+" ";
		yours+=myAnswer[i]+" ";
		if(arr[i].answer==myAnswer[i])
		  score+=20;
	}
	document.write("【正确答案】"+right+"<br>【你的答案】"+yours+"<br>【你的得分】"+score);
	}
}
</script>

三、运行结果展示

1、首页界面
图3-1首页界面

2、垃圾分类界面
图3-2垃圾分类界面

3、垃圾宝贝界面
在这里插入图片描述
图3-3垃圾宝贝界面

4、主题活动界面
在这里插入图片描述
图3-4主题活动界面

5、最新新闻界面
在这里插入图片描述
图3-5最新新闻界面

6、关于我们界面
在这里插入图片描述
图3-6关于我们界面

四、分析总结

本次课程设计给我最大的感受是需要对常用标签语言更好的运用，CSS的布局能力需要更加深入学习，布局能力太差；还有就是需要对JavaScript语言的一个更深入的学习。

陈弟弟

关注

25
点赞
踩
146

收藏

觉得还不错? 一键收藏
8
评论
课程作业2-大一纯网页课程作业——垃圾分类网站设计

“垃圾分类网”项目文档一、项目概述1、设计思路本次网页设计主题是以宣传垃圾分类为主题，因此秉着平台需要突出宣传垃圾分类、提高垃圾分类意识的想法，网页共分6个页面，第一个是整体的一个页面“首页”，主要是后面5个页面的基体；第二个页面是“垃圾分类”页面，垃圾分类页面主要是让垃圾分类变得更清晰，将垃圾分类的知识讲解一遍；第三个界面是“垃圾宝贝”，这个页面是教如何利用垃圾制作一个工艺品，对垃圾再...
复制链接

扫一扫