临时存存储页面上的数据---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 模拟重力
x=x+v v=v+gr cc.Class({ extends: cc.Component, properties: { velocity:{ default:null }, grivatity:{ ...
- BZOJ3346 : Ural1811 Dual Sim Phone
首先将边进行去重,那么有$n\geq\sqrt{m}$. 然后二分答案,转化为判定是否存在两个点它们的出边集合的并集为全集. 那么这两个点必然满足$deg_x+deg_y\geq n$. 不妨设$de ...
- df卡住问题解决
windows的share文件挂载到linux/mnt/share下,当windows重启,会导致df卡住. 运行 1 umount -l /mnt/share 2 killall ...
- 在Spring-Mybatis-Restful中配置多数据源的properties文件
在Spring的配置文件中,如下: <?xml version="1.0" encoding="utf-8"?> <beans xmlns=& ...
- 熟悉熟悉常用的几个算法用JS的实现
(1)数组去重 原理:定义一个对象obj,然后把数组元素作为obj的属性名,利用属性名是否重复进行判重 1 var unique = function(arr){ 2 let obj = {}; 3 ...
- 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验
一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...
- Tarjan 算法&模板
Tarjan 算法 一.算法简介 Tarjan 算法一种由Robert Tarjan提出的求解有向图强连通分量的算法,它能做到线性时间的复杂度. 我们定义: 如果两个顶点可以相互通达,则称两个顶点强连 ...
- UIButton在Disabled状态下标题混乱的问题
最近开发中遇到的问题汇总 有段时间没有归纳开发中遇到的一些问题了,今天就写一下之前开发中遇到的几个问题.希望这 篇文章能让读者在以后的开发中少走弯路.本文将依次介绍<UIButton在Disab ...
- 通过MongoDB的samus驱动实现基本数据操作
一.MongoDB的驱动 MongoDB支持多种语言的驱动: 在此我们只介绍 C# 的驱动.仅C#驱动都有很多种,每种驱动的形式大致相同,但是细节各有千秋,因此代码不能通用.比较常用的是官方驱动和sa ...
- Picture effect of JavaScript
每隔一定时间跟换图片Img = new Array("image/2.jpg","image/1.jpg","image/3.jpg",&q ...