html + jquery 原生开发ToDo网页

最新推荐文章于 2023-06-05 18:19:01 发布
最新推荐文章于 2023-06-05 18:19:01 发布
阅读量524 收藏 4
点赞数
分类专栏： 前端之路 文章标签： html jquery vue 前端 网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42927264/article/details/98634817
版权

html + jquery 原生开发ToDo网页

相信做前端的大家都见过这个网页吧
TodoMVC
Vue的入门网页

今天我用原生html实现一下
demo
在这里插入图片描述

首先看一下html部分的代码：

<html>

<head>
    <meta charset="utf-8">
    <title>幸运记事</title>
    <link rel="stylesheet" href="./css/app.css">

</head>

<body>
    <section id="todoapp" class="todoapp">
        <header class="header">
            <h1 id="title" onmouseover="todo.method().hover()" >记</br>事</h1>

        </header>
        <section class="main">
            <section class="input"> 
                    <input type="checkbox" class="all-checker" onclick="allChecked(this)"> 
                    <img class= "input-img" src="./img/arrow_down.svg"> 
                    <input id="add-todo" class="new-todo" placeholder="诗和远方..." autofocus="autofocus" autocomplete="off" 
                                            onkeyup="todo.method().addItem(event)">
                    
            </input>
            </section>
            
            <ul id="list" class="todo-items">
            </ul>
            <section id="listFoot" class="foot">
                <span class="todo-count">
                        待办&nbsp;
                    <span id = "count">0</span>
                    
                </span>
                <ul class="filters">
                    <li id = "do-border" class="filter" onclick="todo.method().doFilter(this)">
                        <span >全部</span>
                    </li>
                    <li class="filter" onclick="todo.method().doFilter(this)">
                        <span >未完成</span>
                    </li>
                    <li class="filter"  onclick="todo.method().doFilter(this)">
                        <span >已完成</span>
                    </li>
                </ul>
                <span id = "removeCom" class="rmv-complete" onclick="rmvCompleted()">
                        移除已完成
                </span>
            </section>
        </section>
        <footer class="footer">

        </footer>
    </section>
</body>
<script src="./js/app.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>

</script>

</html>

比较简单哈！

再看下简单的css吧

ul{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.todoapp{
    display: flex;
    flex-direction: column;
    width: 60%;
}

.header{
   
    font-size: 3rem;
    color: red;
    opacity: 0.6;
    /* display: flex; */
    text-align: center;
    width: 100%;
}

.new-todo{   
   
    width: 100%;
    font-size: 1.5rem;
    font-style: italic;
    opacity: 0.8;
    padding: 1.5rem 1rem 1.5rem 4rem;
    border: none;
    box-shadow: 2px 2px 5px #333333;
}

.main{
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    border:1px solid #F2F2F2;
    box-shadow: 2px 2px 7px #3333339a;
}

.todo-items{
    margin: 0;
    
    list-style: none;
    display: none;
    padding: 0;
}
#count{
    color:red;
}
.todo-item{
    display: flex;
    flex-direction: row;
    justify-items: center;
    margin: 0;
    font-size: 1.4rem;
    opacity: 0.8;
    padding: 1.3rem 1rem 1.3rem 0.8rem;
    font-style: normal;
    border-bottom: 1px solid #dddcdcb2;
    font-weight: 100;
}

.rmv-complete{
    color: #f84747ee;
    cursor: pointer;
    display: none;
    margin-left: 10%;
    margin-right: 4%;
    
}

.li_img{
    margin-left: auto;
    cursor: pointer;
}

.todo-item:hover{
    background-color: #F2F2F2;
    font-size: 1.7rem;
}

.foot{
    display: none;
    flex-direction: row;
    width: 100%;
    margin: 0;
    font-size: 1.2rem;
    color: #747171ee;
    opacity: 0.8;
    padding: 1rem 1rem 1rem 0;
    border-bottom: 1px solid #dddcdcb2;
}
.todo-count{
    margin-left: 7%;
    display: flex;
}
.filters{
    display: flex;
    list-style: none;
    margin-left: auto;
}

.filter{
    display: flex;
    padding: 0;
    display: block;
    padding:0 0.5rem;
    /* border: 1px solid #ff780ab2; */
    border-radius: 5px;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
    
}
.complete{
    margin-left: auto;
    margin-right: 5%;
}
.footer{
    width: 100%;
}

.input{
    display: flex;
    flex-direction: row;
}

.input-img{
    
    position: absolute;
    margin-top: 20 ;
    margin-left: 15;
}
.input-img:hover{
    opacity: 0.8;
}
.check{
    position: absolute;
    z-index: 2;
    width: 30;
    height:30;
    margin-left: 10;
    
}

.li-text{
    padding-left: 4rem;
}

.all-checker{
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    width: 50;
    height:50;
    position: absolute;
    margin-left: 10;
    margin-top: 10;
}

最后再看看简单的js

哈哈，开个玩笑
先上代码吧，后面我们来分析一下

(function () {
    const todo = {
        mounted: function () {

            this.method().startBorder();
        },
        data: {
            context: document.getElementById("title"),

        },
        method: function () {
            return {

                startBorder: () => {
                    document.getElementById("do-border").style.border = "1px solid #ff780ab2";

                },
                /**
                 * 鼠标滑过标题
                 */
                hover: () => {
                    switch (this.data.context.innerText) {
                        case "记\n事":
                            this.data.context.innerText = "幸\n运";
                            break;
                        case "幸\n运":
                            this.data.context.innerText = "记\n事";
                            break;
                    }
                },

                /**
                 * 回车添加
                 */
                addItem: (event) => {

                    if (event.keyCode == "13") {
                        var text = document.getElementById("add-todo").value;
                        if (text.replace(/\s/g, "").length == 0) {    //空字符检测
                            return;
                        }
                        var list = document.getElementById("list");
                        var foot = document.getElementById("listFoot");
                        var count = list.getElementsByTagName("li").length;

                        document.getElementById("count").innerHTML = parseInt(count) + 1;
                        foot.style.display = "flex";
                        list.style.display = "block";
                        addLi(text);
                        document.getElementById("add-todo").value = "";
                    }
                },
                /**
                 * 筛选器
                 */
                doFilter: (obj) => {
                    var children = obj.parentNode.children;
                    var index = $(obj).index();
                    for (var i = 0; i != 3; i++) {
                        if (index == i) {

                            children[i].style.border = "1px solid #ff780ab2";
                        } else {
                            children[i].style.border = "";
                        }
                    }
                    this.method().filterResult(obj);
                },

                /**
                 * 筛选显示结果
                 */
                filterResult: (obj) => {
                    switch ($(obj).index()) {
                        case 0:
                            $("#list li").each(function () {
                                $(this).show();
                            })
                            break;
                        case 1:
                            $("#list li").each(function () {
                                $(this).show();
                                if ($(this)[0].children[0].checked)
                                    $(this).hide();
                            })
                            break;
                        case 2:
                            $("#list li").each(function () {
                                $(this).show();
                                if (!$(this)[0].children[0].checked)
                                    $(this).hide();
                            })
                            break;
                    }
                }


            }
        }
    }
    window.todo = todo
    window.todo.mounted()
})()



/**
 * 创建li元素
 * @param {string} text 
 */
function addLi(text) {
    var ele_li = document.createElement("li");
    ele_li.setAttribute("class", "todo-item");
    addEle(ele_li, text);
    list.appendChild(ele_li);

}

/**
 * 全选操作
 * @param {checkbox} obj 
 */
function allChecked(obj) {
    var li_list = document.getElementById("list").getElementsByTagName("li");
    if (li_list.length == 0)
        return;
    if (obj.checked) {
        for (var i = 0; i != li_list.length; i++) {
            deleteLine(li_list[i].getElementsByTagName("span")[0], 1);
            li_list[i].getElementsByTagName("input")[0].checked = true;
            document.getElementById("count").innerHTML = 0;
        }
    } else {
        for (var i = 0; i != li_list.length; i++) {
            deleteLine(li_list[i].getElementsByTagName("span")[0], -1);
            li_list[i].getElementsByTagName("input")[0].checked = false;
            document.getElementById("count").innerHTML = i + 1;
        }
    }
    rmvComp();
}
/**
 * 增加或删除   删除线
 * @param {*} text 
 */
function deleteLine(text, num) {
    if (num == 1) {
        text.style.textDecoration = "line-through";
    } else {
        text.style.textDecoration = "none";
    }

}


/**
 * 为li添加子元素
 * @param {*} li 
 * @param {*} text 
 */

function addEle(li, text) {
    //checkbox
    var ele_check = document.createElement("input");
    ele_check.setAttribute("class", "check");
    ele_check.setAttribute("type", "checkbox");
    ele_check.setAttribute("onclick", "isChecked(this)");
    //事项内容
    var ele_span = document.createElement("span");
    ele_span.setAttribute("class", "li-text");
    ele_span.setAttribute("ondblclick" ,"updateItem()")
    ele_span.setAttribute("id", "li-span")
    ele_span.innerHTML = text;
    //删除图标
    var ele_img = document.createElement("img");
    ele_img.setAttribute("class", "li_img");
    ele_img.setAttribute("src", "./img/delete.svg");
    ele_img.setAttribute("onclick", "deleteItem(this)");
    //加入子元素
    li.appendChild(ele_check);
    li.appendChild(ele_span);
    li.appendChild(ele_img);
}

function updateItem(){

}

//为删除按钮添加删除节点功能
function deleteItem(obj) {
    var li = obj.parentNode;
    var ul = li.parentNode;
    //alert($(li).index());
    if (!li.getElementsByTagName("input")[0].checked) {
        var count = document.getElementById("count").innerHTML;
        document.getElementById("count").innerHTML = parseInt(count) - 1;
    }

    ul.removeChild(li);
    rmvComp();
}


function isChecked(obj) {

    var count = document.getElementById("count").innerHTML;
    if (obj.checked) {
        deleteLine(obj.parentNode.getElementsByTagName("span")[0], 1);
        document.getElementById("count").innerHTML = parseInt(count) - 1;

    } else {
        deleteLine(obj.parentNode.getElementsByTagName("span")[0], -1);
        document.getElementById("count").innerHTML = parseInt(count) + 1;

    }
    rmvComp();
}

function rmvComp() {
    var needRmv = false;
    $("#list li").each(function () {
        if ($(this)[0].children[0].checked) {
            needRmv = true;
            return;
        }
    })
    if (needRmv) {
        $("#removeCom").show();
    } else {
        $("#removeCom").hide();
    }

}


function rmvCompleted() {
    $("#list li").each(function () {
        if ($(this)[0].children[0].checked) {
            $(this).remove();
        }
    })
}

大家可以看到，一开始就是一个function，然后里面是一些变量，方法之类的
看起来是不是很像vue啊
其实大概就是这样，利用js的闭包特性，共享包内属性，还能都储存在内存中

(function(){
...})()

这是立即执行函数的一种写法。
然后定义常量，里面再次定义变量，返回方法的方法

一鲸落.万物生
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript + jquery实现定时修改文章标题
01-19
用javascript+jquery写的一个定时器，定时修改文章标题。 代码如下: <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset=”GB2312″> <meta name=”viewport” content=”width=device-width”> </head> <body> <div> <ul id=”jokeTitle”> <li class=”line”>Test Line One</li> <li class=”line”>Test Line Two</li> <li
前端经典案例——购物车，Jquery实现
qq_45654741的博客
08-16 4108
1Jquey实现 品优购案例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.
jQuery动画效果
weixin_34334744的博客
05-31 93
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。 显示动画 方式一： $("div").show(); 解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过内部封装了display: block;实现的。 <body> <div></div> <...
JQuery实现简单网页
m0_53121631的博客
11-29 1431
JQuery实现简单网页。
设计一个TODO List，页面结构如下图所示，要求：
weixin_43697050的博客
04-10 594
设计一个TODO List，页面结构如下图所示，要求： 使用HTML与CSS完成界面开发 实现添加功能：输入框中可输入任意字符，按回车后将输入字符串添加到下方列表的最后，并清空输入框 实现删除功能：点击列表项后面的“X”号，可以删除该项 实现模糊匹配：在输入框中输入字符后，将当前输入字符串与已添加的列表项进行模糊匹配，将匹配到的结果显示在输入框下方。如匹配不到任何列表项，列表显示空 注：以上代码实...
纯 JavaScript/CSS3/HTML5 实现的 TodoList | 简易实用|代码开源
qq_45685275的博客
03-21 1222
项目预览 项目预览地址（戳此）：TodoList 项目介绍 项目兼容多端，可在移动端、PC端使用。使用本地存储存储数据，可供个人计划使用，也可作为前端入门的项目学习。 功能介绍 添加、删除待办 设置待办为完成、撤销完成 本次存储，不删除本地存储数据一直有 简洁、实用 技术栈 JavaScript（ES6+） CSS3 HTML5 数据存储部分使用本地存储 localstorage，不删除缓存可持久存储数据。 项目地址 预览：Link 源码：Github地址 ...
jquery+原生HTML——实现table表格切换
七月❤的博客
04-13 768
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <style> .mod-tab .tab{ float:left; paddi.
最近做的排班表，整个表格全JS动态生成，用了很多Jquery的库，4个主要页面
weixin_30883311的博客
05-28 1258
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <h...
React-DRF-ToDoApp:这是一个由React + DRF开发的ToDo应用程序
05-08
介绍创建该应用的基础是基于我从2020年5月至2020年6月底参与的Django团队开发项目中获得的经验和知识。非常感谢项目成员的帮助，包括组织者@ digisaku710。我们也要感谢Gtca重组了部署，尽管突然要求我们在部署时...
TODO-LIST:JAVASCRIPT + HTML + CSS
05-03
待办事项清单 JAVASCRIPT + HTML + CSS
todo:jQuery +节点+猫鼬
05-18
去做jQuery + Node.js +猫鼬
JS将所有对象s的属性复制给对象r(原生js+jquery)
12-09
原生写法： 代码如下:/** * 将所有 s 的属性复制给 r * @param r {Object} * @param s {Object} * @param is_overwrite {Boolean} 如指定为 false ，则不覆盖已有的值，其它值 * 包括 undefined ，都表示 s ...
纯html+css+jq实现流程图
HuangsTing的博客
10-12 3955
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程图</title> <script src="../assets/lib/jQuery.js"></script> <...
一款漂亮的排班系统界面Html+jQuery「代码片段」
congcenglaotan的博客
02-14 2810
选择这样的技术架构方案，目的是方便后续其他项目可以用到，不管是前端采用的vue、react、layui、微信小程序等等。如果你们的项目刚好用到了排班系统，不防来参考下，提高我们的工作效率，不用重复去造轮子，了解和掌握好基本技能和业务需求，即可高效的完成我们的项目任务。趁年假期间，回顾整理下最近几年做过的一些系统项目界面，把一些应用场景比较常见的功能代码片段分享出来记录一下。看到这样的界面，想必大家都会说一定用到了一些常用UI组件，其实并没有纯原生js开发。1、按照「周」或者「月」来显示排班的人员。
html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
weixin_31880471的博客
06-03 461
tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序，会自动识别表格内容数据类型，使用也非常方便。使用jQuery tablesort实现html表格方法:1. 下载jQuery和tablesort脚本，并在html中引用该脚本文件：2. 格式化需要排序的html表格：a. 给需要排序的表格指定CCS类：class="sort-table"b. 使用thead和tbod...
原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）
薛定谔的猫的博客
06-05 1484
一些项目有时候，因为需求不同，比如需要SEO或者项目很小，亦或者只需要做一个简单好管理的官网或者网站等等，在这种情况下，我们再去使用类似于vue和react等等这类型框架，就有一点大材小用，也有点费时间。但是，vue这类框架的组件化开发在体验上对开发者非常友好，那么我们如果通过使用原生的前端技术去实现组件化开发？
js jquery 实现 排班,轮班，日历，日程。使用fullcalendar 插件
热门推荐
ParadiserD的博客
12-08 3万+
如果想用fullcalendar实现排班功能，或者日历、日程功能。那么只需要简单的几步： 这里先挂官网链接： fullcalendar fullcalendar官网下载链接 一、下载及简单配置 1、这里先明确你想要的是哪种形式式：fullcalendar 提供多种日历形式： 你们可以在官网首页的演示里面看到，在这里我主要讲一下我这里使用的两种实现： (1)日历模式（只是用fullc
【JQuery】JQuery和原生DOM操作动态增加HTML代码问题探究
weixin_45500506的博客
08-16 392
文章目录结论依然存在的问题   事情是这样的。再做动态表格行和列的删除时，导师说我做的这种键入的形式不对，这种形式用户体验感多差啊，甲方肯定不会满意的。给我提出改进方案，要么通过模态框和输入框结合起来获得相关数据，要么通过结合单选框（radio），选中要删除的行或列，再点击按钮删除。模态框我现在还没接触，同时为了锻炼前端编程能力就选择了使用单选框来解决。 首先给出基本HTML <!DOCTYPE html> <html lang="en"> <head> <
Electron安装失败或者npm start Error
编程书生的博客
10-31 1772
太难了！！！ 一开始报这个错！！！ 应该是cnpm安装会报错，我们改用npm，慢点就慢点。 安装之后，electron -v 就会成功显示我们安装好了。 然后退回vscode中，在我们的electron项目中，npm install后，发现start报错。 右键开始菜单找到Windos PowerShel 输入以下命令： 然后我们删掉node-modules后，再次install 然后sta...
jquery制作网页代码
最新发布
11-29
以下是一个简单的使用jQuery制作网页的例子： ```html <!DOCTYPE html> <html> <title>jQuery网页制作示例 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"> body { background-color...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值