大题1111

最新推荐文章于 2024-07-13 11:50:40 发布

苗国赞

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量45

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_68984521/article/details/130652609

版权

1.要求：1、熟悉初始文档结构。

2、将代码中的XXX改为自己的真实班级和内容。(没有修改扣2分)

3、根据实验五的参考代码，在上面程序中“输入代码”处添加jQuery代码实现如下功能：

(1)实现单击其中一个菜单选项，显示其对应下面的子菜单列表，其他菜单下的子菜单隐藏，如图1-4所示。(注意本实例中的列表菜单有三层)。

(2)实现单击其中一个菜单选项，如果子菜单显示，则隐藏，如果子菜单隐藏，则显示。

<!doctype html>

<html>

<head>

ul,li{margin:0;padding:0}

body{font-size:12px;}ul,li{list-style: none;}

a:link,a:visited{text-decoration:none;}

div.list{width:210px;margin:40px auto 0 auto;}

.list a{display:block;font-weight:bold; height:36px;line-height:36px;}

.list ul li{background-color:#467ca2; border-bottom:solid 1px #316a91;}

.list ul li a{padding-left:10px;color:#fff;}

.list ul li ul{display:none;}

.list ul li ul li {background-color:#6196bb;border-bottom:solid 1px #467ca2;}

.list ul li ul li ul{display:none;}

.list ul li ul li a{ padding-left:20px; color:#9FC;}

.list ul li ul li ul li { background-color:#d6e6f1; border-bottom:solid 1px #6196bb; }

.list ul li ul li ul li a{ padding-left:30px;color:#316a91;}

</style>

//输入代码

</script>

</head>

<body>

<h1 align="center">软工XXX班XXX</h1>

<ul>

<ul >

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

<ul >

<li><a href="#">本科生教育</a></li>

<li><a href="#">研究生教育</a></li>

</ul>

</li>

<ul >

<li><a href="#">本科生招生</a></li>

<li><a href="#">研究生招生</a></li>

<li><a href="#">继续教育招生</a></li>

<li><a href="#">就业信息网</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

V/输入代码

$(function({

$("a.inactive").click(function((if($(this).next("u

I").is(":visible"))$(this).next("ul").hide0;

else $(this).next("ul").show().parent().siblings(

).find("ul").hide();})

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

2.黑白格子表格

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

table{

border: 3px solid #000;

}

td{

width: 50px;

height: 50px;

border: 1px solid #000;

}

<style>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

//输入代码

$(function(){

$("tr:nth-child(odd)>td:nth-child(even)").css("background-color","#000");

$("tr:nth-child(even)>td:nth-child(odd)").css("background-color","#000");

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<h1>软工XXX班XXX</h1>

</table>

</body>

</html>

3.全选

<!doctype html>

<html>

<head>

<title>复选框级联效果</title>

caption{

font-size: 20px;

font-weight: bold;

margin-bottom: 10px;

}

td{

text-align:center;

font-size:16px;

line-height:16px;

}

input{

display: inline-block;

width: 16px;

height: 16px;

}

input[type=button]{

width: 100px;

}

<style>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

//输入代码

$(function(){

//点击全选按钮后，根据全选按钮的选中状态来控制下面所有子复选框的状态

$("#all").click(function(){

var ch=this.checked;

$("input[name=product]").each(function(){

this.checked=ch;

})

// 单击下面的单个复选框时，需要根据当前下面所有复选框的状态来确定全选复选框的状态，当下面所有复选框都选中时，全选复选框才选中，否则全选复选框不能选中

$("input[name=product]").click(function(){

if($("input[name=product]:checked").length==$("input[name=product]").length)

$("#all")[0].checked=true;

else

$("#all")[0].checked=false;

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<caption>河科大软件学院Web前端课程开设情况表</caption>

<tr>

<td>

<input type = "checkbox" id = "all" value = "全选" />全选

</td>

</tr>

<tr>

<td>网页设计基础</td>

</tr>

<tr>

<td>JavaScript程序设计</td>

</tr>

<tr>

<td>JQuery程序设计</td>

</tr>

<tr>

<td>Vue.js前端开发</td>

</tr>

<tr>

<td>移动开发技术</td>

</tr>

</table>

</body>

</html>

初始页面显示如下图1-9(佳能、三星、奥林巴斯文字显示为红色)。

单击文字“显示所有品牌”

单击文字“精简显示品牌”

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

*{padding:0px; margin:0px;}

.SubCategoryBox{ width:600px; margin:20px auto; font-size:12px;}

.SubCategoryBox ul{ list-style:none;}

.SubCategoryBox ul li{float:left; width:200px; text-align:center;height:24px; line-height:24px;}

.showmore { clear:both; text-align:center; padding-top:10px;}

a {color:#04D; text-decoration:none;}

a:hover { color:#F50; text-decoration:underline;}

.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}

.promoted a{ color:#f50;}

}

</style>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

//输入代码

$(function(){

$("li:eq(0),li:eq(2),li:eq(10)").addClass("promoted");

var $category=$("ul li:gt(5):not(:last)");

$(".showmore>a").click(function(){

// if($category.is(":visible")){

if($(this).text()=="精简显示品牌"){

$category.hide();

$(this).children("span").html("显示全部品牌");

$("ul li").removeClass("promoted");

}

else{

$category.show();

$(this).children("span").html("精简显示品牌");

$("li:eq(0),li:eq(2),li:eq(10)").addClass("promoted");

//$("ul li").filter(":eq(0),:eq(2),:eq(10)").addClass("promoted");

//$("ul li").filter(":contains(佳能),:contains(三星),:contains(奥林巴斯)").addClass("promoted");

}

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<h1>软工XXX班XXX</h1>

<ul>

<li ><a href="#">其它品牌相机</a><i>(7275)</i></li>

</ul>

<a href="#"><span>精简显示品牌</span></a>

</div>

</body>

</html>

5.全选全不选反选提交爱好的运动

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

$(function(){

$("#CheckedAll").click(function(){

// $(":checkbox").attr("checked",true);

$(":checkbox").prop("checked",true);

})

$("#CheckedNo").click(function(){

// $(":checkbox").attr("checked",false);

$(":checkbox").prop("checked",false);

})

$("#CheckedRev").click(function(){

//each()方法是实现对jQuery对象中封装的原生对象的遍历

$(":checkbox").each(function(){

//this就代表当前遍历到的那个原生对象

this.checked=!this.checked;

//$(this).prop("checked",!$(this).prop("checked"))

})

$("#send").click(function(){

var str="你选中的是：\n";

$(":checkbox:checked").each(function(){

str=str+$(this).val()+"\n";

})

aler　t(str);

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<h1>软工XXX班XXX</h1>

<form>

你爱好的运动是？<br>

<input type="checkbox" name="items" value="足球">足球

<input type="checkbox" name="items" value="篮球">篮球

<input type="checkbox" name="items" value="羽毛球">羽毛球

</form>

</body>

</html>

单击上面的选项卡，添加相应样式。

(2)下面相应的div框显示。

思考：1、如何实现给选项卡添加样式？

2、如何实现上面的选项卡与下面显示的div对应

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

ul,li{ margin:0; padding:0;}

.tab { width:240px;margin:50px;}

.tab_menu {overflow: hidden;}

.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}

/* 单击选项卡时对应的样式(蓝色背景，白色文字) */

.tab_menu li.selected { color:#FFF; background:#6D84B4;}

.tab_box{ border:1px solid #898989; height:100px;

font-size: 40px;}

.hide{display:none}

<style>

</head>

$(function(){

var $div_li =$("div.tab_menu ul li");

$div_li.click(function(){

$(this).addClass("selected") //当前<li>元素高亮

.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮

var index = $(this).index(); // 获取当前点击的<li>元素在其兄弟元素中的索引。

$("div.tab_box>div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div

.eq(index).show() //显示 <li>元素对应的<div>元素

.siblings().hide(); //隐藏其它几个同辈的<div>元素

})

</script>

<body>

<h1>软工XXX班XXX</h1>

<ul>

</ul>

</div>

</div>

</body>

</html>

(1)偶数的行的添加样式表中的“.even”样式。

(2)奇数的行的添加样式表中的“.odd”样式。

(3)复选框选中的行(即赵五所在行)添加“.selected”样式。

(4)单击行如果添加了“.selected”样式，删除该样式，同时行里的复选框不被选中；如果没有添加“.selected”样式，添加该样式，同时行里的复选框被选中，另外可以多行被选中。

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

table{ border:0;border-collapse:collapse;}

td{padding:2px;width:100px;}

th{text-align:left;padding:4px;border-bottom:1px solid #333;}

.odd{background:#FFF38F;} /* 奇数行样式*/

.even{background:#EEEEEE;} /* 偶数行样式*/

.selected{background:#FF6500;color:#fff;} /* 被选中样式*/

<style>

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！1!!!!!!

$(function(){

// 奇数行添加“.odd”样式

$("tbody>tr:even").addClass("odd");

// 偶数行添加“.even”样式

$("tbody>tr:odd").addClass("even");

//复选框选中的行添加“.selected”样式。

$("tr:contains('王五')").addClass("selected");

// $(':checkBox:checked').parent().parent().addClass('selected');

$('tbody>tr').click(function() {

if ($(this).hasClass('selected')) {

$(this).removeClass('selected').find(':checkbox').prop('checked',false);

}else{

$(this).addClass('selected').find(':checkbox').prop('checked',true);

}

});

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<h1>软工XXX班XXX</h1>

<table>

<thead>

</thead>

<tbody>

<td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

</tbody>

</table>

</body>

<html>

</body>

</html>

创建列表项"哈密瓜"并将其添加在"菠萝"之后;

(2)将 "苹果" 和"橘子"复制一份插入到"雪梨"之后。

思考：1、如何创建“哈密瓜”列表节点？

2、如何选中 "苹果" 和"橘子"节点？

3、插入节点时分别采用什么方法？

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

$(function(){

//输入代码

var $li=$("<li>哈密瓜</li>");

$("li:eq(2)").after($li);

$("li:lt(2)").clone().appendTo("ul");

});

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<h1>软工XXX班XXX</h1>

<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>

<ul>

</ul>

</body>

</html>

(1)单击“添加”按钮将左边列表框中选中的列表项添加到右边的列表框中。

(2)单击“删除”按钮将右边列表框中选中的列表项添加到左边的列表框中。

思考：1、如何获取列表框中选中的列表项？

2、append()方法与appendTo()方法使用上有什么不同？

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

float:left;

}

.divC{

padding-top:80px;

margin:0 30px;

}

select{

width:122px;

height: 200px;

}

<style>

$(function(){

$("#btn1").click(function(){

// $("#sel2").append($("#sel1>option:selected"));

$("#sel1>option:selected").appendTo("#sel2");

})

$("#btn2").click(function(){

$("#sel1").append($("#sel2>option:selected"));

})

</script>

</head>

<body>

<h1>软工XXX班XXX</h1>

<h2>课题专业选择</h2>

<span>课题适合专业</span><br>

</div>

</div>

</div>

</body>

</html>

10.

单击"发布"按钮，将多行文本框中的内容以列表形式添加到代码中的<ul>元素里面。

(2) 要求最新发布的内容显示在最上面，同时清空多行文本框。

思考：1、如何获取多行文本框中输入的内容，并创建相应节点？

2、插入节点时分别采用什么方法？

<!doctype html>

<html>

<head>

<style>

.box{

width:600px;

margin:20px auto;

border: 1px solid #000;

padding:10px;

}

#txt{

width:400px;

height: 150px;

}

ul,li{

padding:0;

margin:0;

}

ul{

list-style: none;

margin:0 126px 0 65px;

}

li{

border-bottom: 1px dashed #ccc;

}

<style>

$(function(){

//输入代码

$("#btn").click(function(){

var tt=$("#txt").val();

$("#txt").val("");

var $li=$("<li>"+tt+"<li>");

$("ul").prepend($li);

});

})

</script>

</head>

<body>

<h1>软工XXX班XXX</h1>

</div>

</body>

</html>

11.

利用Vue.js实现图片切换。初始效果如图4-2所示，重点掌握条件判断指令(v-show、v-if)和属性绑定指令的使用。保存文档为eaxmple7.html。(15分)

单击图片上的向左和向右箭头可以浏览图片。

(2)当显示到最后一张图片时，向右箭头隐藏；当显示到第一张图片时，向左箭头隐藏。

<!DOCTYPE html>

<html>

<head>

<style>

#app{

width: 400px;

margin:0 auto;

position: relative;

}

h1{

text-align: center;

}

#app>img{

width: 100%;

height:300px;

/*overflow: hidden; 消除误差*/

display: block; /*消除误差*/

}

a>img{

width: 30px;

height: 50px;

position: absolute;

}

a>.imgl{

left:0;

top:125px;

}

a>.imgr{

right:0;

top:125px;

}

<style>

</head>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

<body>

<h1>洛阳牡丹甲天下,花开时节动京城</h1>

</div>

// 创建vue实例

var myVue=new Vue({

el:"#app",

data:{ /ue实例用到的数据

imgArr:["images/mudan1.jpg",

"images/mudan2.jpg",

"images/mudan3.jpg",

"images/mudan4.jpg",

"images/mudan5.jpg",

"images/mudan6.jpg",

"images/mudan7.jpg",

"images/mudan8.jpg",

"images/mudan9.jpg",

"images/mudan10.jpg"],

index:0,

methods:{

left:function(){

this.index--;

right:function(){

this.index++;

}

})

</script>

</body>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</html>

12.

简单计算器效果

输入相应的数据并选择计算方式，单击“=”按钮实现相应的计算

<!DOCTYPE html>

<html>

<head>

<title>计算器案例</title>

<style>

input,select{

font-size:30px;

}

<style>

</head>

<body>

</div>

var myVue=new Vue({

el:"#app",

data:{

n1:0,

n2:0,

result:0,

opt:'+'

methods:{

calc:function(){

switch(this.opt){

case "+":

this.result=parseInt(this.n1)+parseInt(this.n2);

break;

case "-":

this.result=parseInt(this.n1)-parseInt(this.n2);

break;

case "*":

this.result=parseInt(this.n1)*parseInt(this.n2);

break;

case "/":

this.result=parseInt(this.n1)/parseInt(this.n2);

break;

}

})

</script>

</body>

</html>

13.

在文本框中输入内容后单击回车键会添加到列表中。

(2)鼠标移动到每列后面的图标上单击可以删除相应内容。

(3)鼠标单击“clear”可以将所有列表内容删除。

(4)统计区域左侧始终统计记录的条数。

(5)当列表都被删除了，统计区的内容不显示。

思考：页面中列表的变化主要有谁决定，添加和删除操作主要改变哪里？

<!DOCTYPE html>

<html>

<head>

<title>记事本举例</title>

<style>

body,h2,ul,li{

padding: 0;

margin:0;

}

body{

margin-top: 50px;

background-color: #eee;

}

#app{

width: 300px;

margin: 20px auto 0 auto;

/*border:1px solid #ccc;*/

background-color: #fff;

border-radius: 5px;

}

h2{

text-align: center;

margin-bottom:10px;

color:red;

}

div.write>input{

height:35px;

width: 290px;

border: none;

border-bottom:1px solid #ccc;

padding-left: 10px;

font-size: 20px;

font-style: italic;

outline: none;

}

ul{

list-style: none;

background-color:#fff;

padding-left: 10px;

padding-right: 10px;

}

ul>li{

line-height: 38px;

color:#000;

font-size: 20px;

border-bottom:1px solid #ccc;

position: relative;

}

ul>li>img{

width: 24px;

position:absolute;

right:0;

top:9px;

display: none;

cursor: pointer;

}

ul>li:hover>img{

display: block;

}

/* ul>li:last-child{

border: none;

}*/

div.count{

height:18px;

color: #000;

font-size: 12px;

padding:8px 10px 0 10px;

position: relative;

}

div.count>span.right{

float: right;

cursor: pointer;

}

<style>

</head>

<body>

<h2>迷你记事本</h2>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</div>

<ul>

<li v-for="(item,index) in list">{{index+1+": "}}{{item}}

</li>

</ul>

<span class="right" @click="clear" v-if="list.length">Clear</span>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</div>

var myVue=new Vue({

el:"#app",

data:{

list:[],

inputValue:"",

methods:{

add:function(){

this.list.push(this.inputValue);

this.inputValue="";

remove:function(x){

this.list.splice(x,1);

clear:function(){

this.list=[];

}

})

</script>

</body>

</html>

14.

单击“添加景点”按钮在表格末尾添加一行，如图5-2所示。

(2)单击，每一行后面的“删除”按钮，可以删除对应的行。

<!DOCTYPE html>

<html>

<head>

<title>v-for指令</title>

<style>

table{

border: 3px solid red;

border-collapse: collapse;

}

td,th{

border: 1px solid red;

}

</style>

</head>

<body>

<table>

<td>{{item.province}}</td>

</tr>

</table>

</div>

// 创建vue实例

var myVue=new Vue({

el:"#app",

data:{

list:[

{id:1,province:"河南省",city:"郑州市",spot:"少林寺"},

{id:2,province:"河南省",city:"洛阳市",spot:"龙门石窟"},

{id:3,province:"湖北省",city:"长沙市",spot:"橘子洲头"},

{id:4,province:"湖南省",city:"武汉市",spot:"黄鹤楼"},

]

methods:{

add(){

var len=this.list.length+1;

var str={id:len,province:"山东省",city:"青岛市",spot:"日照"};

this.list.push(str);

del(x){

this.list.splice(x,1);

}

})

</script>

</body>

</html>

15.

弹幕

在下面文本框中输入文字，单击“发送”按钮将文字随机显示在div.main元素中1366*200的范围内；文字颜色在预定的颜色数组中随机添加一种颜色；文字向左移动。

(2)在文本框中输入完文字按下“回车”键实现单击“发送”按钮的功能。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

body{

overflow: hidden;

}

div.main{

position: relative;

font-size: 30px;

}

div.main>span{

position: absolute;

width:400px;

text-align: center;

}

div.content{

width:100%;

line-height: 80px;

background-color: #999;

position: fixed;

left: 0;

bottom:0;

text-align: center;

}

div.content>span{

font-size: 20px;

}

div.content>input{

height: 22px;

width:240px;

font-size: 18px;

border-radius: 5px;

}

div.content>button{

background-color: red;

font-size: 18px;

color: #fff;

border:none;

}

<style>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

var colors=["red","green","blue","pink","yellow","orange","purple"];

$(function(){

$("#btn").click(function(){

var rco=parseInt((Math.random()*colors.length));

var rleft=parseInt(Math.random()*1366);

var rtop=parseInt(Math.random()*200);

$("<span></span>").text($("#text").val())

.css({"color":colors[rco],"left":rleft,"top":rtop})

.appendTo("div.main")

.animate({"left":-500},10000,function(){

$(this).remove();

}); //利用动画让文字向左移动到屏幕500像素时删除

})

$("#text").keydown(function(e){

if(e.which==13) $("#btn").click();

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<h1>软工XXX班XXX</h1>

</div>

</body>

</html>

16.

(1)单击“前台设计组”、“前台开发组”、“后台开发组”行控制它们下面两行的显示或隐藏；

(2)单击“前台设计组”、“前台开发组”、“后台开发组”如果下面两行隐藏，添加“selected”样式，如果下面两行显示，删除“selected”样式。

(3)利用事件模拟使得页面的初始效果如图3-6所示。

<!doctype html>

<html>

<head>

<style>

div{

width:400px;

background-color:#C60;

}

</style>

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

$(function(){

$("#btn").click(function(){

$("<p>我是新创建的段落</p>").appendTo("body");

})

$("body").on("click","p",function(e){

$(this).css("background-color","pink");

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

<p>我是段落一</p>

<p>我是段落二</p>

<p>我是段落三</p>

<p>我是段落四</p>

</body>

</html>

17.

轮播图

实现图片的自动轮换(图片在显示时，对应右边的数字加上相应的样式)；

(2)当用户鼠标移入数字上时，自动轮播停止，图片和文字的变换跟随鼠标移入的数字相应变换，当用户鼠标移出数字时，自动轮播继续。

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

padding:0;

margin:0;}

body{

margin:50px;}

.content{

width:540px;}

.scroll_top{

height:51px;

background:url(images/dd_scroll_top.gif) no-repeat;

}

.scroll_mid ul{

list-style:none;}

.scroll_mid{

background-color:#f2f2f3;

border-left:1px solid #d6d5d6;

border-right:1px solid #d6d5d6;

height:180px;

padding:5px 0 0 5px;

overflow:hidden;

position:relative;

}

.scroll_img>li>img{

display: block;

}

.scroll_number{

position:absolute;

right:10px;

top:15px;

}

.scroll_number li{

width:13px;

height:16px;

font-size:12px;

border:1px solid #999;

margin-top:5px;

text-align:center;}

.scroll_end{

height:8px;

background:url(images/dd_scroll_end.gif) no-repeat;}

.scroll_number_hover{

background-color:#FC3;

color:#fff;}

</style>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

$(function(){

var $liimg=$(".scroll_img").find("li"); //存放图片的列表

var $linum=$(".scroll_number").find("li"); //存放数字

var index=0;

$linum.eq(index).addClass("scroll_number_hover");

var timer; //存放定时器

$linum.mouseover(function(){

window.clearInterval(timer);

index=$(this).index();

play(index); //图片切换

}).mouseout(function(){

autoPlay();

})

function play(index){

$liimg.eq(index).stop(true,true).fadeIn().siblings().fadeOut();

$linum.eq(index).addClass("scroll_number_hover").siblings().removeClass("scroll_number_hover");

}

//自动播放

function autoPlay(){

timer=window.setInterval(function(){

index++;

index=index%6;

//if(index==6) index=0;

play(index);

},2000);

}

autoPlay();

})

</script>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

</head>

<body>

</ul>

</ul>

</div>

</div>

</body>

</html>

18.

当移入某个星星“☆”，该星星与前面的星星都会变成实心星星“★”，后面的星星为☆；

(2) 没有单击星星“☆”，当鼠标移出，星星都是空心星星“☆”；

(3) 单击某个星星后即完成评价，鼠标移出后被点击的星星和前面的星星都会变成实心星星“☆”，后面的星星为“☆”。

五角星

<!DOCTYPE html>

<html>

<head>

<style>

ul{

padding: 0;

margin:0;

}

li{

list-style: none;

float:left;

font-size: 30px;

color: red;

}

</style>

$(function(){

// 为li元素注册mouseover事件

$('.comment>li').mouseover(function(){

$(this).text('★').prevAll().text('★').end().nextAll().text('☆');

});

// 为li元素注册mouseout事件

$('.comment>li').mouseout(function(){

$('.comment').find('li').text('☆');

$('.comment>li.on').text('★').prevAll().text('★');

});

// 为li元素注册click事件

$('.comment>li').click(function(){

$(this).addClass("on").siblings().removeClass("on");

});

})

</script>

</head>

<body>

</ul>

</body>

</html>

19.

利用前面学习的Vue.js框架中的指令完成跑马灯效果，

在上面程序“输入代码”中添加代码，实现单击“跑起来”下面的文字能向左或向右循环滚动；单击“停止”文字滚动停止。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</div>

var vm=new Vue({

el:"#app",

data:{

msg:"河南科技大学软件学院！",

intervalId:null //在data上定义定时器变量

methods:{

dong:function(){

console.log(this.msg);

var _this=this;

if(this.intervalId!=null) return;

// this.intervalId=setInterval(function(){

// // 获取到第一个字符

// var start=_this.msg.substring(0,1);

// // 获取后面的所有字符

// var end=_this.msg.substring(1);

// _this.msg=end+start;

// },400)

this.intervalId=setInterval(()=>{

var start=this.msg.substring(0,1);

var end=this.msg.substring(1);

this.msg=end+start;

},400)

stop:function(){

clearInterval(this.intervalId); //清除定时器，并不是置为null

this.intervalId=null;

}

})

// 分析：

// 1、给"动起来"按钮绑定一个点击事件，v-on或@

// 2、在按钮的事件处理函数中写相关的业务逻辑代码：获取msg中的字符串，然后调用字符串的substring来进行字符串的获取操作，把第一个字符截取出来，放到最后一个位置即可；

// 3、为了实现单击下按钮，自动获取的功能，需要将2步骤中的代码放到一个定时器中去

</script>

</body>

</html>

20.

实现一个如下图所示的蔬菜水果商店界面。界面功能如下：

(1)页面初始显示如下图所示(将父组件中的蔬菜列表数据利用子组件进行展示)。

(2)在页面上勾选行里面的复选框，利用计算属性控制页面上的蔬菜水果总数量、总价格、结算按钮是否可用。

注意：项目代码通过下载附件获取，把自己写的代码标明顺序填写到答题框中。

项目入口文件main.js代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

<tbody>

<td>

</td>

<td>{{ item.fruit }}</td>

<td>￥{{ item.price }}</td>

<td>

<span>{{ item.count }}</span>

</td>

</tr>

</tbody>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

<tfoot>

<td colspan="2"><span>总数量：{{ total }}斤</span></td>

<td colspan="2"><span>总价：{{ amount }}元</span></td>

</td>

</tr>

</tfoot>

</table>

</div>

var vm = new Vue({

el: '#app',

data: {

fruitlist: [

{ id: 1, fruit: '香橼', pic: 'images/1.jpg', price: 5, count: 1, state: false},

{ id: 2, fruit: '柚子', pic: 'images/2.jpg', price: 4.5, count: 1, state: false },

{ id: 3, fruit: '橘子', pic: 'images/3.jpg', price: 3, count: 1, state: false },

{ id: 4, fruit: '橙子', pic: 'images/4.jpg', price: 6, count: 1, state: false },

{ id: 5, fruit: '粑粑柑', pic: 'images/5.jpg', price: 6.5, count: 1, state: false },

{ id: 6, fruit: '柠檬', pic: 'images/6.jpg', price: 4, count: 1, state: false },

{ id: 7, fruit: '青柠', pic: 'images/7.jpg', price: 5.2, count: 1, state: false },

methods: {

// 点击了数量 -1 按钮

onSubClick(id) {

// find() 方法返回满足提供的测试函数的数组中第一个元素的值。

// const findResult = this.fruitlist.find(x => x.id === id)

const findResult = this.fruitlist.find(function (x) { return x.id === id })

if (findResult && findResult.count > 1) {

findResult.count--

}

// 点击了数量 +1 按钮

onAddClick(id) {

const findResult = this.fruitlist.find(x => x.id === id)

if (findResult) {

findResult.count++

}

computed: {

// 动态计算出勾选水果的总数量

total() {

let t = 0;

this.fruitlist.forEach(x => {

if (x.state) {

t += x.count;

}

})

return t;

// 已勾选商品的总价格

amount() {

let a = 0;

this.fruitlist

.filter(x => x.state)

.forEach(x => {

a += x.price * x.count;

})

return a;

// 控制按钮的禁用状态

isDisabled() {

return this.total === 0

}

})

</script>

</body>

</html>

21.

<!文档类型 html>

<html>

<头>

<元字符集=“UTF-8”>

<风格>

表{

宽度：600px;

边界崩溃：崩溃;

上边距：30px;

}

th，td{

边框：1px 纯粉色;

文本对齐：居中;

}

</样式>

</头>

<身体>

</分区>

</标签>

</分区>

<表>

<头>

<tr>

</TR>

</头>

<身体>

<td>{{xitem.id}}</td>

<td>{{xitem.ctime|_____（3）_____}}</td>

<道>

</道>

</TR>

</tbody>

</桌>

</分区>

<脚本>

Vue.filter（'dateFormat'，function（dateStr）{

var dt=dateStr;

var y=dt.getFullYear（）;

var m=（dt.getMonth（）+1）.toString（）.padStart（2，“0”）;

var d=dt.getDate（）.toString（）.padStart（2，“0”）;

var hh=dt.getHours（）.toString（）.padStart（2，“0”）;

var mm=dt.getMinutes（）.toString（）.padStart（2，“0”）;

var ss=dt.getSeconds（）.toString（）.padStart（2，“0”）;

返回 y+'-'+m+'-'+d+' '+hh+'：'+mm+'：'+ss;

})

var vm=new Vue（{

el：“#app”，

数据：{

id：''，

名称：“”，

车单：[

{id：1，name：'比亚迪'，ctime：new Date（）}，

{id：2，name：'东风风神'，ctime：new Date（）}，

{id：3，name：'长城欧拉'，ctime：new Date（）}，

{id：4，name：'奇瑞'，ctime：new Date（）}

]

方法：{

添加

add（）{

var car={id：this.id，name：this.name，ctime：new Date（）};

_______(5)_________;

删除

删除（x）{

this.carlist.splice（x，1）;

}

});

</脚本>

</身体>

</html>

(1)：keyup.enter(2)：v-for="xitem in carlist"(3)：dateFormat(4)：deleteItem(xitem)(5)：this.carlist.push(car)

22.

利用计算属性computed实现猜数字游戏，保存文档为eaxmple4.html

<!DOCTYPE html>

<html>

<head>

<style>

div#app {

width: 250px;

margin: 30px auto;

border: 1px solid #666;

border-radius: 10px;

padding: 10px;

}

p {

text-align: center;

}

</style>

</head>

<body>

<h1>软工XXX班XXX</h1>

<p>

</p>

<p>{{result}}</p>

</div>

var myVue = new Vue({

el: "#app",

data: {

key: Math.round(Math.random() * 100),

val: "",

result: "请猜一个1~100之间的整数"

methods: {

guessed() {

const value = parseInt(this.val);

if (isNaN(value))

this.result = "请猜一个1~100之间的整数";

if (value > this.key)

this.result = "太大了，往小一点猜!";

if (value < this.key)

this.result = "太小了，往大一点猜!";

if (value === this.key) {

this.result = "祝贺你，你猜对了!";

}

});

</script>

</body>

</html>

23.

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

:root {

font-size: 13px;

}

body {

padding: 8px;

}

</style>

</head>

<body>

</div>

</div>

</form>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>{{index + 1}}</td>

<td>{{item.brandname}}</td>

<td>

</div>

</td>

<td>{{item.addtime | dateFormat}}</td>

<td>

< a href="#" @click.prevent="removeBrand(item.id)">删除</ a>

</td>

</tr>

</tbody>

</table>

</div>

// 创建全局的过滤器

Vue.filter('dateFormat', (dateStr) => {

const dt = new Date(dateStr)

const y = dt.getFullYear()

const m = padZero(dt.getMonth() + 1)

const d = padZero(dt.getDate())

const hh = padZero(dt.getHours())

const mm = padZero(dt.getMinutes())

const ss = padZero(dt.getSeconds())

return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

})

// 补零的函数

function padZero(n) {

return n > 9 ? n : '0' + n

}

// 创建 vue 的实例对象

const vm = new Vue({

el: '#app',

data: {

brandname: '',

nextId: 6,

brandlist: [

{ id: 1, brandname: '宝马', state: true, num: 100, addtime: new Date() },

{ id: 2, brandname: '奥迪', state: false, num: 80, addtime: new Date() },

{ id: 3, brandname: '奔驰', state: true, num: 70, addtime: new Date() },

{ id: 4, brandname: '大众', state: true, num: 60, addtime: new Date() },

{ id: 5, brandname: '沃尔沃', state: true, num: 100, addtime: new Date() }

methods: {

// 添加新的品牌数据

addNewBrand() {

// 判断品牌名称是否为空

// if (!this.brandname) return aler　t('品牌名称不能为空！')

// 添加新的品牌数据

this.brandlist.push({

id: this.nextId,

brandname: this.brandname,

state: true,

num: 100,

addtime: new Date(),

})

// 重置文本框的值

this.brandname = ''

// 让 nextId 自增 +1

this.nextId++

// 根据 Id 删除对应的数据

removeBrand(id) {

this.brandlist = this.brandlist.filter((x) => x.id !== id)

}

})

</script>

</body>

</html>

苗国赞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
大题1111

{ id: 2, fruit: '柚子', pic: 'images/2.jpg', price: 4.5, count: 1, state: false },{ id: 4, fruit: '橙子', pic: 'images/4.jpg', price: 6, count: 1, state: false },{ id: 1, fruit: '香橼', pic: 'images/1.jpg', price: 5, count: 1, state: false},
复制链接

扫一扫