深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › 前端综合 › 待办事项安排办公任务（HTML+CSS+JavaScript实现）源码 ...
返回列表 发新帖
查看: 669|回复: 0

待办事项安排办公任务（HTML+CSS+JavaScript实现）源码下载

[复制链接]
蚂蚁

UID
3
贡献
54
金币
10
主题
16
在线时间
4 小时
注册时间
2022-9-27
最后登录
2023-4-11
发表于 2023-4-8 11:16:57 | 669 | 0 | 显示全部楼层 |阅读模式
蚂蚁 2023-4-8 11:16:57 669 0 显示全部楼层
待办事项安排办公任务（HTML+CSS+JavaScript实现）源码下载

待办事宜源码下载.jpg

  • 重新点击已勾选的复选框，事项回到未完成列表
  • 可以随时删除项目
代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>代办事项</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         * {
  12.             padding: 0;
  13.             margin: 0;
  14.             box-sizing: border-box;
  15.         }

  17.         .nav {
  18.             width: 600px;
  19.             margin: 0 auto;
  20.             display: flex;
  21.             justify-content: center;
  22.             align-items: center;
  23.         }

  25.         .nav input {
  26.             width: 450px;
  27.             height: 50px;
  28.             font-size: 25px;
  29.             padding-left: 10px;
  30.         }

  32.         .nav button {
  33.             width: 150px;
  34.             height: 50px;
  35.             border: none;
  36.             color: white;
  37.             background-color: orange;
  38.             font-size: 18px;
  39.         }

  41.         .nav button:active {
  42.             background-color: grey;
  43.         }

  45.         .container {
  46.             width: 600px;
  47.             margin: 0 auto;
  48.             display: flex;
  49.             justify-content: center;
  50.             padding-top: 10px;
  51.         }

  53.         .container .left,
  54.         .container .right {
  55.             width: 50%;
  56.         }

  58.         .container .left h3,
  59.         .container .right h3 {
  60.             text-align: center;
  61.             height: 50px;
  62.             line-height: 50px;
  63.             background-color: black;
  64.             color: white;
  65.         }

  67.         .container .row {
  68.             height: 50px;
  69.             display: flex;
  70.             align-items: center;
  71.             justify-content: flex-start;
  72.         }

  74.         .container .row span {
  75.             width: 240px;
  76.         }

  78.         .container .row button {
  79.             width: 40px;
  80.             height: 30px;
  81.         }
  82.     </style>

  84.     <!-- 表示上方的 div，里面方输入框和按钮 -->
  85.     <div class="nav">
  86.         <input type="text">
  87.         <button>新建任务</button>
  88.     </div>
  89.     <!-- 下方的 div，里面分成左右两栏 -->
  90.     <div class="container">
  91.         <div class="left">
  92.             <h3>未完成</h3>
  93.         </div>
  94.         <div class="right">
  95.             <h3>已完成</h3>
  96.         </div>
  97.     </div>

  99.     <script>
  100.         let addTaskBtn = document.querySelector('.nav button');
  101.         addTaskBtn.onclick = function() {
  102.             // 1. 获取输入到的内容
  103.             let input = document.querySelector('.nav input');
  104.             let taskContent = input.value;
  105.             // 2. 创建一个 div.row, 里面设置上面需要的 复选框, 文本， 删除按钮
  106.             let row = document.createElement('div');
  107.             row.className = 'row';
  108.             let checkBox = document.createElement('input');
  109.             checkBox.type = 'checkbox';
  110.             let span = document.createElement('span');
  111.             span.innerHTML = taskContent;
  112.             let deleteBtn = document.createElement('button');
  113.             deleteBtn.innerHTML = '删除';
  114.             row.appendChild(checkBox);
  115.             row.appendChild(span);
  116.             row.appendChild(deleteBtn);
  117.             // 3. 把 div.row 添加到 .left 中
  118.             let left = document.querySelector('.left');
  119.             left.appendChild(row);


  122.             // 4. 给 checkBox 增加一个点击处理函数，点击之后就能直接移动任务
  123.             checkBox.onclick = function() {
  124.                 // 当用户点击的时候，就获取到当前的这个row元素
  125.                 // 把这 row 给添加到另外一侧
  126.                 if (checkBox.checked) {
  127.                     // 已选中状态
  128.                     target = document.querySelector('.right');
  129.                 } else {
  130.                     target = document.querySelector('.left');
  131.                 }
  132.                 target.appendChild(row);
  133.             }

  135.             // 5. 实现删除效果
  136.             deleteBtn.onclick = function() {
  137.                 // 要想删除 row， 就需要知道 row 的父元素
  138.                 let parent = row.parentNode;
  139.                 parent.removeChild(row);
  140.             }

  142.             // 6. 删除输入框的内容
  143.             input.value = '';
  144.         }
  145.     </script>
  146. </body>
  147. </html>
复制代码

html代码, 前端项目
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表