JavaScript小项目-任务清单

一番码客

于 2020-01-10 07:43:06 发布

阅读量1.1k

点赞数 4

分类专栏：【一番码客】软件开发实战

本文链接：https://blog.csdn.net/weixin_42456822/article/details/103918291

版权

本文介绍了如何使用JavaScript实现一个任务清单项目。思路包括监听点击事件来添加元素和存储数据，页面加载时读取并显示数据。同时，讨论了CSS中的2D/3D转换属性在样式设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

思路分析

点击事件：
- 添加元素到页面
- 存储数据
- 存储总数据条数
页面加载成功的时候：
- 读取数据
- 遍历数据
- 添加元素到页面
CSS样式：
- 2D/3D 转换属性（Transform）

代码实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>任务清单</title>
		<style type="text/css">
			.right {
    
				border: 1px solid red;
				width: 100px;
				height: 100px;
				background-color: yellow;
				padding: 15px;
				box-sizing: border-box;
				position: relative;
				float: left;
				margin: 15px;
				transform: rotate(-10deg);
				-ms-transform: rotate(-10deg);
				-moz-transform: rotate(-10deg);
				-webkit-transform