web进阶任务之备忘录

1.1 任务目标

通过优化备忘录的部分功能及页面跳转示例，您可以练习BOM window对象、BOM 定时器等相关知识点。

1.2 任务说明

增加备忘录前置页面，对备忘录的返回顶部功能进行优化
页面跳转示例

1.3 具体要求

广告前置页面停留固定秒数，自动跳转至备忘录页面，并且具有跳过功能
实现返回顶部时的过渡动画效果
实现浏览器内核判断
掌握页面跳转的几种实现方式

2.1 任务实现

运用js、css、html来编码实现

2.1.1 html代码

广告界面

<!DOCTYPE html>
<html lang="zh">
<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><style>.advertise{width: 350px;height: 500px;margin: 0 356px;}p{margin: 10px 480px;}</style>
</head>
<body><img src="./images/advertise.jpg" alt="广告" class="advertise"><p>正在跳转备忘录</p><p class="skip">点击跳过广告！</p>
</body>
<script>var skip = document.querySelector('.skip');// 指定的毫秒数后调用函数或计算表达式var t1 = setTimeout(function(){open('\demo1.html','_self');},5000);skip.addEventListener('click',function(){// 定时器清除方法clearTimeout(id)，id为setTimeout()的返回值;clearTimeout(t1);// open('\demo1.html','_self');location.href = '\demo1.html';})
</script>
</html>

备忘录界面

<!DOCTYPE html>
<html lang="zh">
<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="./css/demo.css"><link rel="stylesheet" href="./css/reset.css">
</head>
<body><header></header><main class="main-box"><div class="center-box"><p class="title">备忘录:</p><div class="action"><input type="text"  placeholder = "请填写内容" ><button class="add">添加</button></div><div><ul class="list"><li class="item"><span>周一早上例会</span><div class="control"><button class="delete">删除</button><button class="finsh">完成</button><button class="edit">编辑</button></div></li></ul></div><div><img src="./images/top.png" alt="返回顶部" class="rTop"></div></div></main>
</body>
<script src="./js/demo.js"></script>
</html>

2.1.2 css代码

初始化 reset.css

*{margin: 0;border: 0;border-radius: 5px;padding: 0;
}ul li{list-style: none;
}

实现 demo.css

html,body{height: 100%;
}
.main-box{margin: 0 auto;width: 700px;height: 100%;overflow: scroll;background-color: rgba(8, 228, 125, 0.973);
}.center-box{position: relative;top:15px;margin: 10px 20px;background-color: blue;
}.title{margin: 10px;
}input{margin: 10px;width: 310px;height: 20px;
}
.list{background-color: rgb(255, 255, 255);margin: 10px;position: relative;bottom: 10px;left: -8px;
}.list>.finshed{background-color: rgb(9, 247, 247);
}.list>.active{background-color: rgb(231,231,231);
}
.finshed>span{text-decoration: line-through;
}.item{margin: 20px;height: 30px;
}.control{display: inline;
}
.control>button{float: right;
}button{width: 42px;height: 20px;margin: 5px 10px;color: white;
}.add{background-color: black;
}.edit{background-color: blue;
}.finsh{background-color: green;
}.delete{background-color: red;
}.rTop{display: none;width: 26px;height: 40px;position: fixed;right: 340px;bottom: 150px;
}

2.1.3 js代码

var box = document.querySelector('.main-box');
var input = document.querySelector('.action input');
var addBtn = document.querySelector('.add');
var list = document.querySelector('.list');
var editBtn = document.querySelectorAll('.edit')
var finshBtn = document.querySelectorAll('.finsh');
var deleteBtn = document.querySelectorAll('.delete');
var rTop = document.querySelector('.rTop');
var t1 ='';//定义一个变量用于存储setInterval(周期性定时器)的返回值
addBtn.addEventListener('click',add);
input.addEventListener('keydown',function(event)
{if(event.key == 'Enter') add();
});// 为小火箭添加鼠标点击监听事件，响应为backTop，返回顶部函数
rTop.addEventListener('click',backTop);/* 获取box滚动条垂直滚动距离 */
box.addEventListener("scroll", function () {var myTop = box.pageYOffset || box.scrollTopif(myTop > 69){rTop.style.display = 'block';}else{if(myTop === 0){clearInterval(t1);}rTop.style.display = 'none';}
})for (let index = 0; index < deleteBtn.length; index++) {deleteBtn[index].addEventListener('click',del);editBtn[index].addEventListener('click',edit);finshBtn[index].addEventListener('click',finsh);list.children[index].addEventListener('mouseenter',function(){this.classList.add('active');})list.children[index].addEventListener('mouseleave',function(){this.classList.remove('active');})list.children[index].addEventListener('dblclick',function(){this.querySelector('.item>span').innerHTML = prompt("请输入您想修改的内容！");});}function add()
{list.insertAdjacentHTML('beforeend', `<li class="item"><span>${input.value}</span><div class="control"><button class="delete">删除</button><button class="finsh">完成</button><button class="edit">编辑</button></div></li>`)list.lastElementChild.querySelector('.delete').addEventListener('click',del);list.lastElementChild.querySelector('.edit').addEventListener('click',edit);list.lastElementChild.querySelector('.finsh').addEventListener('click',finsh);list.lastElementChild.addEventListener('mouseenter',function(){this.classList.add('active');})list.lastElementChild.addEventListener('mouseleave',function(){this.classList.remove('active');})list.lastElementChild.addEventListener('dblclick',function(){this.querySelector('.item>span').innerHTML = prompt("请输入您想修改的内容！");});
}function edit()
{var item = this.parentNode.parentNode;var value = prompt("请输入您想修改的内容！");if(value != null){item.querySelector('.item>span').innerHTML = value;}}function finsh()
{var item = this.parentNode.parentNode;item.classList.add('finshed');}function del(){var item = this.parentNode.parentNode;list.removeChild(item);
}function backTop()
{/*该方法是让页面直接跳转到顶部，中间没有过渡效果box.scroll(0,0);//因为是main里面加了滚动条，所以需要main调用该方法*/t1 = setInterval(function(){box.scrollBy(0,-10)//可将内容滑动指定的距离（相对于当前位置）},10)//每隔10毫秒，内容向上滑动10px
}

2.1.4 成果展示

广告界面
备忘录功能：添加
备忘录功能：完成
备忘录功能：删除
备忘录功能：修改编辑
返回顶部小火箭

web进阶任务之备忘录相关推荐

攻防世界web进阶区Web_php_wrong_nginx_config详解
攻防世界web进阶区Web_php_wrong_nginx_config详解题目详解题目打开发现无论我们输入什么他都会弹出网站建设不完全那么我们使用御剑进行扫描,扫描到了admin和robo ...
攻防世界WEB进阶之ics-05
攻防世界WEB进阶之ics-05 1.描述 2.实操 3.答案 1.描述难度系数: 3星题目来源: XCTF 4th-CyberEarth 题目描述:其他破坏者会利用工控云管理系统设备维护中心的后 ...
攻防世界web进阶区ics-05详解
攻防世界web进阶区ics-05详解题目解法 preg_replace ctype_alnum strpos X-Forwarded-For 题目我们只能点击一个地方解法御剑扫描有一个css ...
攻防世界-WEB进阶-ics-06（Burpsuite爆破使用）
前言题目来源:攻防世界-WEB进阶----ics-06 使用工具:Burpsuite 题目云平台报表中心收集了设备管理基础服务的数据,但是数据被删除了,只有一处留下入侵者的痕迹分析这里只有报表 ...
bugkuCTF web进阶+web最后两题
bugkuCTF一些题目江湖魔头 ①js文件类–>js文件被压缩解压缩方法–>在该网站解压缩即可 https://tool.lu/js/ ②伪造cookie 1.解密与获取cookie ...
Spring Boot进阶之Web进阶学习笔记
前言昨天 -> 带女朋友和小表弟去了动物园,看了<全球风暴>电影. 今天 -> 学习了慕课网的Spring Boot进阶之Web进阶的视频和该项目项目源码,看了一个基于Sp ...
攻防世界WEB进阶之upload
攻防世界WEB进阶之upload 第一步:分析第二步:实操第三步:答案第一步:分析难度系数: 1星题目来源: RCTF-2015 题目描述:暂无脑洞很大的一题,首先题目什么都没给出,进入场 ...
攻防世界WEB进阶之upload1
攻防世界WEB进阶之upload1 一.分析二.实操三.答案难度系数: 1星题目来源: 暂无题目描述:暂无题目场景: 略题目附件: 暂无一.分析首先打开场景,上传文件进行抓包操作,发 ...
攻防世界web进阶区Web_python_block_chain详解
攻防世界web进阶区Web_python_block_chain详解题目详解 51% 双花攻击题目详解我们整理一下 Announcement: The server has been res ...

web进阶任务之备忘录

1.1 任务目标

1.2 任务说明

1.3 具体要求

2.1 任务实现

2.1.1 html代码

2.1.2 css代码

2.1.3 js代码

2.1.4 成果展示

web进阶任务之备忘录相关推荐

最新文章

热门文章