折腾一个网页来瞅瞅是啥有源码！

879792799 · 发表于 2024-10-19 11:37:36

本帖最后由 879792799 于 2024-10-19 18:36 编辑

没啥技术含量瞎折腾的东拼西凑感觉挺好玩可以刷新后保持住数据

可以自己输入的任务在标题下横线处即可

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ToDoList—最简单的待办事项列表</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<style>
body {
font-family: 'Titillium Web', sans-serif;
min-height:0;
max-width: 450px;
display: inline-block;
position: relative;
left: 50%;
transform: translate(-50%,0);
margin: 90px 0;
padding:30px;
background: #fefffa;
box-shadow: 0 0px 12px 7px #BEACDC inset;
border-radius:1em;
}
header {
height: 30px;
font-size: 30px;
text-align: center;
}
input {
border-right: none;
width: 100%;
height: 30px;
outline: none;
border: none;
border-bottom: 1px solid #6a6a6a;
background-color: transparent;
color: #262626;
box-shadow: none;
border-radius: 0;
}
input:placeholder {
color: #cc4848;
}
section {
margin: 0 auto;
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 11px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 50px;
line-height: 50px;
background: #848493;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ol li {
cursor: move;
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 11px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #d83303;
background: #c16fe1;
line-height: 20px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section header input {
width: 500px;
padding: 0 2%;
}
}
</style>
</head>
<body>
<header>
<label for="title">做完每天的事改进时间效率</label>
</header>
<section>
<input type="text" id="title" name="title" placeholder=" " required="required" autocomplete="off" />
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<script>
$(function(){
var yulist=[
{ title:"多读书", done:false},
{ title:"没事多锻炼", done:false},
{ title:"休息必须保证", done:false},
{ title:"多琢磨赚钱", done:false},
{ title:"改进时间效率", done:false}
]
getData()
load()
// 读取本地存储的数据
function getData(){
var data=localStorage.getItem("todolist");
if(data!==null){
return JSON.parse(data);
}else{
return yulist;
}
}
// 保存本地存储数据
function saveData(data){
localStorage.setItem("todolist",JSON.stringify(data));
}
// 渲染加载操作
function load(){
var data=getData();
// 遍历之前清空ol，ul里面的元素内容
$('ol').empty();
$('ul').empty();
$.each(data,function(index,value){
if(!value.done){
$("ol").prepend('<li><input type="checkbox" name="" id=""> <p>'+value.title+'</p> <a href="javascript:;" id='+index+'></a></li>')
}else{
$("ul").prepend('<li><input type="checkbox" name="" id="" checked="checked"> <p>'+value.title+'</p> <a href="javascript:;" id='+index+'></a></li>')
}
})
$('#todocount').html($('ol').children().length)
$('#donecount').html($('ul').children().length)
}
// 按下回车键添加事项
$("#title").on('keyup',function(e){
if(e.keyCode===13){
if($(this).val()==='') return
// 先读取本地存储原来的数据
var local=getData()
// 把local数组进行更新数据，把最新的数据追加给local数组
local.push({title:$(this).val(),done:false});
saveData(local)
load()
$(this).val('')
}
})
// 删除操作
$('ol,ul').on('click',"a",function(){
// 获取本地存储
var data=getData();
// 修改数据
var index=$(this).prop('id');
data.splice(index,1)
// 保存到本地存储
saveData(data);
// 重新渲染页面
load();
})
// 正在进行和已完成选项操作
$('ol,ul').on('click',"input",function(){
// 获取本地存储数据
var data=getData();
// 修改数据
var index=$(this).siblings('a').prop('id');
data[index].done=$(this).prop('checked');
// 保存到本地存储
saveData(data);
// 重新渲染页面
load();
})
})
</script>
</body>
</html>

复制代码

879792799 · 发表于 2024-10-19 11:39:12

样式哼简单就是在样式文件CSS中 body部分加入就行

body {
font-family: 'Titillium Web', sans-serif;
min-height:0;
max-width: 450px;
display: inline-block;
position: relative;
left: 50%;
transform: translate(-50%,0);
margin: 90px 0;
padding:30px;
background: #fefffa;
box-shadow: 0 0px 12px 7px #BEACDC inset;
border-radius:1em;
}

guong · 发表于 2024-10-19 12:26:05

来学习下

fxssj · 发表于 2024-10-19 12:52:31

学习一下，谢谢分享

wn168cn@163.com · 发表于 2024-10-19 13:27:08

学习了

wang1126 · 发表于 2024-10-19 14:16:35

谢谢楼主分享

wang1126 · 发表于 2024-10-19 14:19:16

本帖最后由 wang1126 于 2024-10-19 14:20 编辑

不小心多按了一下

bearxu · 发表于 2024-10-19 14:25:26

貌似去掉jquery，代码也不会变更复杂

13325531750 · 发表于 2024-10-19 16:01:18

折腾一个网页来瞅瞅是啥有源码！感谢分享！俺是来学习的。

hehe5858 · 发表于 2024-10-19 16:30:03

6666

win98se · 发表于 2024-10-20 07:12:13

哪有学习做网站的简单资料年纪大了想学但是入门比较慢

879792799 · 发表于 2024-10-25 20:49:48

win98se 发表于 2024-10-20 07:12
哪有学习做网站的简单资料年纪大了想学但是入门比较慢

我是菜鸟全是百度得来的

没啥好主意，不过我觉得掘金里文章挺多的可以看看

		自动登录	找回密码
密码			注册

折腾一个网页来瞅瞅是啥有源码！

点评

点评

评分

点评

折腾一个网页来瞅瞅是啥 有源码！

点评

点评

评分

点评

折腾一个网页来瞅瞅是啥有源码！