临时存存储页面上的数据---js中的cookie
实现的效果：
当点击某个按钮的时候，实现点击A的同时，弹出B的注册div，使填写在B信息数据保存下来，点击B的确定按钮，B消失，A的图标往后移动一格，原来的位置为图标C,点击C可以弹出来一个链接的页面（页面链接是从B信息里读取出来的），然后依次类推。。。
方法一：
$(function(){ $(".add1").click(function(){
var div = $("#show1");
if ( div.css("display") === "none" ) {
$(".add1").css("opacity",0.4);
div.show();
$('input').val("");
$("#show2").css("display","none");
} else {
div.hide();
$('input').val("");
}
}); // 按钮事件开始
$("#button").click(function(){
var num=0;
var val1 = $(".input-read1").val();
var val2 = $(".input-read2").val();
$("#show1").css("display","none");
$(".add1").animate({left:'70px',opacity:'1'},"fast"); $(".add2").css("display","block");
$.cookie("input-val1", val1, { expires: 0.05});
$.cookie("input-val2", val2, { expires: 0.05 }); var MyCookie1 = $.cookie('input-val1');
var MyCookie2 = $.cookie('input-val2');
$(".icon-index").html(MyCookie1+'</br>'+MyCookie2);
//第二个隐藏开始
$(".add2").click(function(){
var div = $("#show2");
if ( div.css("display") === "none" ) {
div.show();
$("#show1").css("display","none");
} else {
div.hide();
}
$(".if1").attr("src",MyCookie2); }); // 结束
})
})
</script>
但是问题是：没有办法继续往后移动
思路：假使需要4个图标，设置4个按钮A,4个B,4个C,控制每点击一个的样式，虽然麻烦，但是代码还是比较繁琐，需要改进
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jquery的cookie测试</title>
<style>
</style>
</head>
<body>
<!-- Downloads By http://www.veryhuo.com -->
<div class="add1" style="width: 60px; height: 60px; position: absolute;top:0;left: 0; background: url(img/add.png); background-size: cover; cursor: pointer; z-index: 999;"></div>
<div class="add2" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 70px;background: url(img/add.png); background-size: cover; cursor: pointer; z-index: 999;"></div>
<div class="add3" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 140px;background: url(img/add.png);background-size: cover; cursor: pointer; z-index: 999;"></div>
<div class="add4" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 210px;background: url(img/add.png);background-size: cover; cursor: pointer; z-index: 999;"></div>
<div class="add5" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 280px;background: url(img/add.png);background-size: cover; cursor: pointer; z-index: 999;"></div>
<div class="icon-1" style="width: 60px; height: 60px; position: absolute;top:0;left: 0; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div>
<div class="icon-2" style="width: 60px; height: 60px; position: absolute;top:0;left: 70px; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div>
<div class="icon-3" style="width: 60px; height: 60px; position: absolute;top:0;left: 140px; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div>
<div class="icon-4" style="width: 60px; height: 60px; position: absolute;top:0;left: 210px; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div> <div class="show1" style="width:250px;position: absolute;top:70px;left: 10px; background: url(img/bg.jpg);padding:20px;display: none;">
名称：<input type="text" class="input-read1" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br>
地址：<input type="text" class="input-read2" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br>
<button id="button1">确定</button>
</div>
<div class="show2" style="width:250px;position: absolute;top:70px;left: 50px; background: url(img/bg.jpg);padding:20px;display: none;">
名称：<input type="text" class="input-read3" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br>
地址：<input type="text" class="input-read4" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br>
<button id="button2">确定</button>
</div>
<div class="show3" style="width:250px;position: absolute;top:70px;left: 50px; background: url(img/bg.jpg);padding:20px;display: none;">
名称：<input type="text" class="input-read5" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br>
地址：<input type="text" class="input-read6" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br>
<button id="button3">确定</button>
</div>
<div class="show4" style="width:250px;position: absolute;top:70px;left: 50px; background: url(img/bg.jpg);padding:20px;display: none;">
名称：<input type="text" class="input-read7" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br>
地址：<input type="text" class="input-read8" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br>
<button id="button4">确定</button>
</div>
<!--隐藏的窗口效果开始出现-->
<div id="show1" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;">
<iframe width="99.5%" height="100%" orderr="0" class="if1" src=""></iframe>
</div>
<div id="show2" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;">
<iframe width="99.5%" height="100%" orderr="0" class="if2" src=""></iframe>
</div>
<div id="show3" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;">
<iframe width="99.5%" height="100%" orderr="0" class="if3" src=""></iframe>
</div>
<div id="show4" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;">
<iframe width="99.5%" height="100%" orderr="0" class="if4" src=""></iframe>
</div> <div class="icon-index" style="width: 250px; height: 100px; background: pink; position: absolute;top: 0; right: 0;"></div>
<script src="js/jquery.js"></script>
<script src="Scripts/jquery.cookie.js"></script>
<script>
$(function(){
// 第一个!!!:
$(".add1").click(function(){
var div = $(".show1");
if ( div.css("display") === "none" ) {
$(".add1").css("opacity",0.4);
div.show();
$('input').val("");
} else {
div.hide();
$('input').val("");
}
}); // 按钮事件开始
$("#button1").click(function(){ var val1 = $(".input-read1").val();
var val2 = $(".input-read2").val();
$.cookie("input-val1", val1, { expires: 0.05});
$.cookie("input-val2", val2, { expires: 0.05 }); var MyCookie1 = $.cookie('input-val1');
var MyCookie2 = $.cookie('input-val2');
$(".icon-index").html(MyCookie1+'</br>'+MyCookie2); //上面七处为比较重要的代码
if( MyCookie1==""||MyCookie2==""){
alert("信息不能为空哦");
}else{
$(".add1").css("display","none");
$(".icon-1").css("display","block");
$(".show1").css("display","none");
$(".add1").css("opacity",1);
$(".add2").css("display","block"); $(".icon-1").click(function(){
$(".show2").css("display","none");
var div = $("#show1");
if ( div.css("display") === "none" ) {
div.show();
} else {
div.hide();
}
$(".if1").attr("src",MyCookie2);
});
} })
// 结束 // 第二个!!!:
$(".add2").click(function(){
var div = $(".show2");
$("#show1").css("display","none");
if ( div.css("display") === "none" ) {
$(".add2").css("opacity",0.4);
div.show();
// $('input').val("");
} else {
div.hide();
// $('input').val("");
}
});
// 按钮事件开始
$("#button2").click(function(){
var val3 = $(".input-read3").val();
var val4 = $(".input-read4").val(); $.cookie("input-val3", val3, { expires: 0.05});
$.cookie("input-val4", val4, { expires: 0.05 }); var MyCookie3 = $.cookie('input-val3');
var MyCookie4 = $.cookie('input-val4');
$(".icon-index").html(MyCookie3+'</br>'+MyCookie4); $(".add2").css("display","none");
$(".icon-2").css("display","block");
$(".show2").css("display","none");
$(".add2").css("opacity",1);
$(".add3").css("display","block"); $(".icon-2").click(function(){
$(".show3").css("display","none");
var div = $("#show2");
if ( div.css("display") === "none" ) {
div.show();
} else {
div.hide();
}
$(".if2").attr("src",MyCookie4);
});
})
// 结束 // 第三个!!!:
。。。。。。 // 第四个!!!:
。。。。。。
// 第五个!!!:
$(".add5").click(function(){
$(".add5").css("opacity",0.4);
$("#show1").css("display","none");
$("#show2").css("display","none");
$("#show3").css("display","none");
$("#show4").css("display","none");
alert("已达上限");
});
})
</script> </body>
</html>
临时存存储页面上的数据---js中的cookie的更多相关文章
- 临时存存储页面上的数据---Web存储
HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...
- 22SpringMvc_jsp页面上的数据传递到控制器的说明
假设有这个一个业务:在jsp页面上写入数据,然后把这个数据传递到后台. 效果如下:
- 14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表
/** * Flutter StatefulWidget有状态组件.页面上绑定数据.改变页面数据 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/Stat ...
- 【原创】js中利用cookie实现记住密码功能
在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...
- Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据
在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget ...
- js中对cookie的操作及json数据与cookie结合的用法
cookie的使用 添加cookie 添加cookie:document.cookie = “key=value”; // 一次写入一个键值对 document.cookie = 'test1=hel ...
- js中的cookie使用
在网上找到的资料,收藏一下 function getCookies(name) { var arr = document.cookie.match(new RegExp("(^| )&quo ...
- 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码
1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...
- js中的cookie
cookie就是一个存放数据的东西,存储量很小4kb,存放在客户端上和应用设备上. 应用场景 用户注册,用户登录,购物车. Chrome浏览器在计算机中存放cookie的位置 C:\Users\Adm ...
随机推荐
- python 代码片段23
#coding=utf-8 #python还支持动态的实力属性,即那些没有在类定义里生命的属性, #可以"凭空"创造出来 john.tatto='Mom' #继承 class Em ...
- python 代码片段20
#coding=utf-8 # 函数 def foo(x): print x foo(123) # import httplib def check_web_server(host,port,path ...
- js的function
1.funciton的js如果直接写是不会执行的 例如 function TableInit() { //var treeNode = $('#otherTree').omTree('getSelec ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- Sphinx 全量索引加实时索引
source mysql { type = mysql sql_host = 10.10.3.181 sql_user = root sql_pass = dsideal sql_db = dside ...
- 1301. The Trip
A number of students are members of a club that travels annually to exotic locations. Their destinat ...
- 【BZOJ3207】花神的嘲讽计划I 可持久化线段树/莫队
看到题目就可以想到hash 然后很自然的联想到可持久化权值线段树 WA:base取了偶数 这道题还可以用莫队做,比线段树快一些 可持久化线段树: #include<bits/stdc++.h&g ...
- odoo 动态创建字段的方法
动态创建字段并非一个常见的的需求,但某些情况下,我们确实又需要动态地创建字段. Odoo 中创建字段的方法有两种,一种是通过python文件class中进行定义,另一种是在界面上手工创建,odoo通过 ...
- Jquery省市区三级联动案例
//Java部分代码 public String province() throws Exception { List<Province> list=cityBiz.showProvinc ...
- 概率论与数理统计ppt链接
http://e-learning.ecust.edu.cn/G2S/Template/View.aspx?courseId=26835&topMenuId=72352&action= ...