Day02-作业(JavaScriptVue)

news/2024/11/20 11:40:46/

作业1:实现5秒之后,当前页面直接跳转到官网首页(首页地址:https://www.itcast.cn)

提示:

  • 5秒之后,才触发某一个动作

素材:

<!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>作业1</title>
</head>
<body><span id="time">5</span>秒之后跳转到官网首页<script>//实现5秒之后,跳转到官网页面</script>
</body>
</html>


作业2:实现5秒倒计时之后,跳转到官网首页 【注意:需要实现倒计时功能】

提示:

  • 倒计时操作,每一秒钟,需要将计数减一

  • 需要将减一之后的时间,再更新在页面上,页面上展示的时间每秒变化一次(需要通过DOM操作页面元素)

  • 当时间减为0时,跳转到官方首页(https://www.itcast.cn)

素材:

<!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>作业2</title>
</head>
<body><span id="time">5</span>秒之后跳转到官网首页<script>//实现5秒倒计时之后,跳转到官网首页 【注意:需要实现倒计时功能】</script>
</body>
</html>

效果:


作业3:基于JS中的DOM操作及事件绑定完成如下需求

需求:

  • 1. 点击 “改变标题内容” 按钮,需要将div中展示的标题内容替换为 “学员成绩表”

  • 2. 点击 “改变标题颜色” 按钮,需要将div中展示的标题内容以 红色 字体展示(字体保持原有大小,居中)

  • 3. 点击 “删除最后一行” 按钮,需要将表格中的最后一行数据删除掉,删除行可以调用tr这个DOM对象的remove()方法

素材:

<!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>作业3</title>
</head><body><div style="font-size: 30px; text-align: center;" id="tb1">课程表</div><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center" class="data"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" class="data"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr><tr align="center" class="data"><td>003</td><td>王五</td><td>83</td><td>很努力,不错</td></tr><tr align="center" class="data"><td>004</td><td>赵六</td><td>98</td><td>666</td></tr></table><br><div style="text-align: center;"><input id="b1" type="button" value="改变标题内容"><input id="b2" type="button" value="改变标题颜色"><input id="b3" type="button" value="删除最后一行"></div>
</body><script>//1. 点击 “改变标题内容” 按钮,需要将div中展示的标题内容替换为 “学员成绩表”//2. 点击 “改变标题颜色” 按钮,需要将div中展示的标题内容以 红色 字体展示(字体保持原有大小,居中, 提示: 操作style属性控制css样式)//3. 点击  “删除最后一行” 按钮,需要将表格中的最后一行数据删除掉,删除行可以调用tr这个DOM对象的remove()方法</script></html>

效果演示:


作业4:定义Vue对象的基础结构,完成数据绑定

页面的基本结构已经提供了,需要完成如下

需求:

  • 定义Vue对象的基础结构、数据模型

  • 绑定数据模型,并在输入框后面位置实时展示输入内容

素材:

<!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>作业4</title>
</head>
<body><div id="app"><!-- 2. 绑定数据模型,并在输入框后面位置实时展示输入内容 --><input type="text"></div><!--引入js文件--><script src="js/vue.js"></script><script>//1. 定义Vue对象的基础结构、数据模型</script>
</body>
</html>

效果:


作业5:基于Vue的指令完成表单数据绑定

页面的基本结构已经有了,数据模型user对象也定义了

需求:

  • 完成数据绑定 (将表单项的值绑定到对应的数据模型)

  • 在上面区域 (p标签部分) 展示数据模型中的各项数据(通过插值表达式的形式)

  • 点击保存时,需要获取到表单数据,并将其以弹出框形式展示出来(要看到对应中的每一项数据)

提示:

在Vue中定义的方法中,要获取我们定义的数据模型,可以通过this.xxx的形式来获取; 比如:

<script>new Vue({el:"#app", //定义Vue控制的区域data:{message: "Hello Vue"},methods: {handle: function(){alert(this.message);// 这样就获取到了数据模型 message的值.}}});
</script>

素材:

<!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>作业5</title>
</head><body><!--3 将模型数据和视图进行绑定--><div id="app"><!-- 展示模型数据 --><p>输入的姓 名是:</p><p>输入的年 龄是:</p><p>选择的性 别是:</p><p>选择的爱 好是:</p><hr><form action="">姓名:<input type="text" ><br><br>年龄:<input type="text" ><br><br>性别:<input type="radio" value="man">男<input type="radio" value="woman">女<br><br>爱好:<input type="checkbox" value="sing">唱<input type="checkbox" value="dance">跳<input type="checkbox" value="basketball">篮球<br><br><input type="button" id="btn" value="保存"></form></div><!--1 引入js文件-->
<script src="js/vue.js"></script><!--2 定义Vue对象,初始化模型数据-->
<script>new Vue({el:"#app", //定义Vue控制的区域data:{user:{name: "", //姓名age: "",  //年龄gender: "", //性别hobby: []   //由于爱好可能存在多个,使用数组封装          }}});
</script></body>
</html>

效果:


作业6:基于Vue把数据,动态的展示到table中

需求:

  • 将数据模型中定义的数组内容,遍历展示在table表格中

  • 表格中的 序号,需要从1开始

  • 状态 如果为1,展示启动;如果未0,展示禁用

思考:

  • 用vue中的什么指令进行遍历?语法是什么?应该加在哪个标签上?

素材:

<!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>作业6</title>
</head><body><!--3 将模型数据和视图进行绑定--><div id="app"><!--扩展需求:在下方表格中展示品牌信息--><table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><tr align="center"><td>1</td><td>三只松鼠</td><td>三只松鼠</td><td>10</td><td>三只松鼠,好吃不上火</td><td> <font color="gree">启用</font><font color="red">禁用</font></td><td><a href="#">修改</a> <a href="#">删除</a></td></tr></table></div><!--1 引入js文件-->
<script src="js/vue.js"></script><!--2 定义Vue对象,初始化模型数据-->
<script>new Vue({el:"#app",data:{brands: [{brandName: "三只松鼠",companyName: "三只松鼠",ordered: "100",description:"三只松鼠,好吃不上火",status: 1}, {brandName: "优衣库",companyName: "优衣库",ordered: "10",description:"优衣库,服适人生",status: 0}, {brandName: "小米",companyName: "小米科技有限公司",ordered: "1000",description:"为发烧而生",status: 0}, {brandName: "华为",companyName: "华为科技有限公司",ordered: "100",description:"没有伤痕累累,哪来皮糙肉厚,英雄自古多磨难",status: 1}]}});
</script>
</body>
</html>

效果:


http://www.ppmy.cn/news/999919.html

相关文章

【Unity3D】Shader Graph简介

1 Shader Graph 简介 Shader Graph 是 Unity 官方在 2018 年推出的 Shader 制作插件&#xff0c;是图形化的 Shader 制作工具&#xff0c;类似于 Blender 中的 Shader Editor 和 UE 中的 Material Editor&#xff0c;它使用流程图的形式表达顶点变换和片元着色的流程。 Shader …

Amazon Aurora Serverless v2 正式发布:针对要求苛刻的工作负载的即时扩展

我们非常兴奋地宣布&#xff0c;Amazon Aurora Serverless v2 现已面向 Aurora PostgreSQL 和 MySQL 正式发布。Aurora Serverless 是一种面向 Amazon Aurora 的按需自动扩展配置&#xff0c;可让您的数据库根据应用程序的需求扩展或缩减容量。 亚马逊云科技开发者社区为开发者…

Pod hang住问题记录

智能信息费服务&#xff0c;上游是SOA调用&#xff0c;上线一段时间后&#xff0c;偶尔有短暂上游调用接口出错告警&#xff0c;之后立刻恢复。排查日志发现有7-8s间单台pod的所有请求被hang住&#xff0c;之后立刻恢复&#xff0c;在hang住期间出问题的pod可以正常接收上游请求…

若依(RuoYi)系统添加自定义的模块

RuoYi系统是干什么用的&#xff0c;这里不过多说明了&#xff0c;自己搜一下&#xff0c;其提供的功能己经基本满足了一些简单的系统应用&#xff0c;如果想进行二次开发的小伙伴&#xff0c;可能会想仅仅用Ruoyi的后台权限管理&#xff0c;但是业务功能想进行自定义&#xff0…

nodejs环境部署

1.前言 前端的打包必须要使用nodejs环境 2.部署 下载安装包&#xff0c;在下面的路径中找到适合自己项目合适的版本在下载&#xff0c;可以问一下前端开发人员 路径&#xff1a;Index of /dist/ 我这里是下载了14.21.3版本的nodejs环境,上传到需要部署的主机中 mkdir /opt…

LeetCode 热题 100 JavaScript -169多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;3 示例 …

java在idea开发工具中测试Spring Boot上线后临时变量是否可用

上文 java Spring Boot上线运维 启动jar时控制台调整零时变量 我们亲手在项目部署之后 调试了临时变量 但是 目前就还有一个问题 这些指令一般是运维人员去操作的 但是 我们作为开发人员 要保证这些临时变量都是可操作的 或者 不能操作也要提前说清楚 毕竟项目是你写的 你也要负…

JDK8:Lambda表达式使用介绍,Lambda表达式源码及原理分析

文章目录 一、Lambda表达式使用1、Lambda表达式介绍2、Lambda使用规范&#xff08;1&#xff09;Lambda基础格式 3、Lambda表达式与传统方式比对&#xff08;1&#xff09;遍历集合&#xff08;2&#xff09;使用Lambda替换匿名内部类使用&#xff08;3&#xff09;实现Lambda实…