临时存存储页面上的数据---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 ...
随机推荐
- HDU5823 : color II
每种颜色的点集肯定是独立集,因此可以通过$O(2^n)$枚举每个集合判断出每个集合是否只需要一种颜色即可染色. 设$f[i][S]$表示$i$种颜色覆盖$S$这个集合的方案数,假定两个集合可以相交,那 ...
- BZOJ4107 : [Wf2015]Asteroids
首先将速度相减,变成A在动而B不动,若速度为0则显然永远不会相交. 枚举A的每个点以及B的每条线段,计算这三个点共线的时刻. 将时刻排序,对于每个区间进行三分,用半平面交计算相交面积. 注意特判相交面 ...
- Android -----listView的属性大全
http://www.cnblogs.com/zhengbeibei/archive/2013/03/29/2988814.html 01 <?xml version="1.0 ...
- 移动开发流量省起来之Zepto
一张图说明Zepto.js的优势: jquery 1.x最新版284KB,压缩后94KB:jquery2.x最新版247KB,压缩后84KB:Zepto最新版54KB,压缩后9KB!!! 然后 ...
- hdu1232 并查集
1. hdu1232 2.链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 3.总结:简单并查集 #include<iostream> # ...
- Linux多线程实例练习 - pthread_exit() 与 pthread_join()
Linux多线程实例练习 - pthread_exit 与 pthread_join pthread_exit():终止当前线程 void pthread_exit(void* retval); pt ...
- Jenkins 2.7.3 LTS 发布
更新如下: Stop A/B testing of the remoting JNLP3 protocol due to the known issues. The protocol can be e ...
- JAVA正则表达式介绍和使用
本文引用自 http://www.cnblogs.com/android-html5/archive/2012/06/02/2533924.html 技术博客 1.Java中在某个字符串中查询某个字符 ...
- jQuery设计思想之取值和赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html使用心得
(1)<textarea style= "word-break:break-all" rows="5" cols="20"> 在 ...