第五节 小例子
2018-06-11 本文已影响18人
最美下雨天
1、要实现的效果：动态添加无序列表，并保存数据，重新进来后再加载数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
var index=0;
function addLiFunction()
{
var current=localStorage.getItem("total");
if(current!=null)
{
index=current;
}
//添加
var ultag=document.getElementById("ultag");
var content=document.getElementById("content");
var litag=document.createElement("li");
litag.innerHTML=content.value;
ultag.appendChild(litag);
//记录数据
localStorage.setItem("litag"+index,content.value);
//清空输入框
content.value="";
index++;
//记录总数
localStorage.setItem("total",index);
}
//重新打开网页的时候，要取出数据并显示
window.onload=function(){
var total=localStorage.getItem("total");
for (var i=0;i<total;i++) {
//添加
var ultag=document.getElementById("ultag");
var content=document.getElementById("content");
var litag=document.createElement("li");
var value=localStorage.getItem("litag"+i);
litag.innerHTML=value;
ultag.appendChild(litag);
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="text" placeholder="输入内容" id="content"/>
<button id="add" onclick="addLiFunction()">添加</button>
</br>
<ul id="ultag">
</ul>
</body>
</html>
网页显示：
image.png
2、添加备忘录
实现的效果：
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
var index=0;
function addLiFunction()
{
var current=localStorage.getItem("total");
if(current!=null)
{
index=current;
}
//添加
var divtag=document.getElementById("divtag");
var content=document.getElementById("content");
var litag=document.createElement("div");
litag.innerHTML=content.value;
if(index%2==0)
{
litag.setAttribute("class","left");
}
else{
litag.setAttribute("class","right");
}
divtag.appendChild(litag);
//记录数据
localStorage.setItem("divtag"+index,content.value);
//清空输入框
content.value="";
index++;
//记录总数
localStorage.setItem("total",index);
}
//重新打开网页的时候，要取出数据并显示
window.onload=function(){
var total=localStorage.getItem("total");
for (var i=0;i<total;i++) {
//添加
var divtag=document.getElementById("divtag");
var content=document.getElementById("content");
var litag=document.createElement("div");
var value=localStorage.getItem("divtag"+i);
if(i%2==0)
{
litag.setAttribute("class","left");
}
else{
litag.setAttribute("class","right");
}
litag.innerHTML=value;
divtag.appendChild(litag);
}
}
</script>
<style type="text/css">
.left{
border: 1px solid red;
width: 100px;
height: 100px;
background-color: yellow;
padding: 15px;
/*这个可以避免加上padding样式后,会变大(比width和height)*/
box-sizing: border-box;
position: relative;
float: left;
margin: 15px;
transform: rotate(10deg);
/*这个是旋转用的,直接去css文档中复制吧,这个在不同浏览器上有兼容问题,所以写了四个*/
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.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: rotate(-10deg);
-o-transform: rotate(-10deg);
}
</style>
</head>
<body>
<input type="text" placeholder="输入内容" id="content"/>
<button id="add" onclick="addLiFunction()" >添加</button>
</br>
<div id="divtag">
</div>
</body>
</html>
