JS-part11.1-案例: 购物车 / TODOMVC /拖拽

本文链接：https://blog.csdn.net/xiaolei233/article/details/120089833

JavaScript

购物车
TODOMVC
拖拽

购物车

不放代码了

用的之前的list页面:
在这里插入图片描述

购物车页面:
在这里插入图片描述

TODOMVC

ToDoMVC官网
html结构和css是从官网扒下来的
在这里插入图片描述

Html如下:

<!doctype html>
<html lang="en" data-framework="javascript">
	<head>
		<meta charset="utf-8">
		<title>Template • TodoMVC</title>
		<!-- 自带的样式文件 -->
        <link rel="stylesheet" href="./css/base.css">
		<link rel="stylesheet" href="./css/index.css">
        <!-- 留的位置,让你自己书写css样式 -->
		<link rel="stylesheet" href="./css/app.css">
	</head>

	<body>
        <!-- 页面主体部分 -->
		<section class="todoapp"></section>

        <!-- 底部的广告 -->
		<footer class="info">
			<p>Double-click to edit a todo</p>
			<p>Written by <a href="javascript:;">Evan You</a></p>
			<p>Part of <a href="javascript:;">TodoMVC</a></p>
		</footer>

        <script src="../lib/template-web.js"></script>

        <!-- 模板 -->
        <script type="text/template" id="tmp">
            <header class="header">
				<h1>todos</h1>
                <!-- 添加一条 todo 的文本框 -->
				<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?">
			</header>

            {
     {
      if length}}
            <!-- 没有 todo 列表的时候,该标签默认隐藏 -->
			<section class="main">
                <!-- 全选按钮 -->
                <!-- activeNum 表示未选中的数量 -->
                <!-- activeNum === 0, 表示全选 -->
				<input id="toggle-all" class="toggle-all" type="checkbox" {
     {
      activeNum === 0 && 'checked'}}>
                <!-- 关联全选按钮 -->
				<label for="toggle-all">Mark all as complete</label>
                <!-- todo 列表 -->
				<ul class="todo-list">