临时存存储页面上的数据---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 ...
随机推荐
- ccc 调试方法
当修改完一个函数,但是不知道哪个函数调用的时候没有传递正确的参数的时候 需要找出调用这个函数的所有语句,于是我注释掉这个函数就可以了
- BZOJ1946 : [Ceoi2006]ANTENNA
首先通过随机增量法求出最小覆盖圆,作为答案的上界. 然后二分答案,检验的时候枚举每个点作为原点,求出其他每个点被包括在圆内的角度区间,然后扫描线即可. 时间复杂度$O(Tn^2\log n)$. #i ...
- java语言特性概述
一.前言 我们都知道java是面向对象的编程,其中四个基本特性:抽象.封装.继承.多态.这四个特性,概括起来可以这么理解,抽象.封装.继承是多态的基础,多态是抽象.封装.继承的表现. 二. JAVA ...
- MySQL数据类型和常用字段属性总结
前言 好比C++中,定义int类型需要多少字节,定义double类型需要多少字节一样,MySQL对表每个列中的数据也会实行严格控制,这是数据驱动应用程序成功的关键.MySQL提供了一组可以赋给表中各个 ...
- eclipse 高亮配对的括号
在编辑代码框右键->preference,直接就可以看到Matching brackets highlights
- float浮动问题：会造成父级元素高度坍塌；
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
- [SDOI2011]染色 题解
题目大意: 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段) 思路: 树剖之后 ...
- Codeforces Round #215 (Div. 2) C. Sereja and Algorithm
#include <iostream> #include <vector> #include <algorithm> #include <string> ...
- 【ZOJ】3640 Help Me Escape
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4808 题意:一个吸血鬼初始攻击力为f.n条路,他每次等概率选择一条路.如果攻击 ...
- 【JAVA】通过公式字符串表达式计算值,网上的一种方法
public class Test { public static void main(String[] args) { SimpleCalculator s=new SimpleCal ...