临时存存储页面上的数据---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 ...
随机推荐
- 优化WPF 3D性能
Maximize WPF 3D Performance .NET Framework 4.5 As you use the Windows Presentation Foundation (WPF ...
- 【原】MAC显示隐藏文件夹命令
显示隐藏文件夹 1. 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 第一步:命令行执行上述命令:
- [Cocos2d-x For WP8]Scene场景
场景(CCScene) 在游戏里,场景就是关卡. CCScene是app工作流程上独立块,一个app可能拥有多个scene,但是在任何时候只能有一个是激活状态的.一个CCScene对象由一个 ...
- 【noiOJ】p1776
t1776:木材加工 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 木材厂有一些原木,现在想把这些木头切割成一些长度相同的小段木头,需要得到的小段的数目是给 ...
- ios推送：本地通知UILocalNotification
Notification是智能手机应用编程中非常常用的一种传递信息的机制,而且可以非常好的节省资源,不用消耗资源来不停地检查信息状态(Pooling),在iOS下应用分为两种不同的Notificati ...
- Jquery_jquery中attr和prop的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- 20145330《Java程序设计》第四次实验报告
20145330<Java程序设计>第四次实验报告 实验四 Android环境搭建 实验内容 1.搭建Android环境 2.运行Android 3.修改代码,能输出学号 实验步骤 搭建A ...
- winform窗体最大化、最小化、还原
//最大化 private void button_maxsize_Click(object sender, EventArgs e) { this.WindowS ...
- PHP 操作MySQL———来自copy
学习要点:1.PHP 连接到MySQL2.增删改查3.其他常用函数 如果你已经具有了使用PHP.SQL 和MySQL 的丰富经验,现在就可以把所有这些技术组合在一起.PHP 与MySQL 之间稳固的集 ...
- [LintCode] Scramble String 爬行字符串
Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...