临时存存储页面上的数据---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 ...

随机推荐

Hadoop执行作业时报错：java.lang.OutOfMemoryError: Java heap space
常常被一些用户问到,说“为什么我的mapreduce作业总是运行到某个阶段就报出如下错误,然后失败呢?以前同一个作业没出现过的呀?” 10/01/10 12:48:01 INFO mapred.Job ...
border单样式写法的问题
先写 border-top:5px; border-right:10px; 后写: border-style:solid; border-color:red;
C#进程操作
C#进程操作转:http://www.cnblogs.com/vienna/p/3560804.html 一.C#关闭word进程 foreach (System.Diagnostics.Proc ...
DataContract
DataContractAttribute Class is in the System.Runtime.Serialization namespace. But you should add ref ...
tomcat 设置根目录访问
from http://nj-apple-tree.iteye.com/blog/1635953 1,设置跟路径时,三种方式在Tomcat默认安装后,tomcat的主目录是webapps/root目 ...
[CareerCup] 18.7 Longest Word 最长的单词
5.7 Given a list of words, write a program to find the longest word made of other words in the list. ...
[CareerCup] 17.11 Rand7 and Rand5 随机生成数字
17.11 Implement a method rand7() given rand5(). That is, given a method that generates a random numb ...
JavaScript：词法结构
1.字符集JavaScript程序是用Unicode字符集编写的. 1.1 区分大小写 JavaScript是区分大小写的语言.也就是说,关键字.变量.函数名和所有标识符(identifier)都必须 ...
JS原型探索小记(一)
最近,我学习了jquery的源码,有个很深的认识就是——当对js的基本语法和面向对象思维了解比较熟悉之后,js真正的精髓在通过阅读一些优秀的框架源码也显现出来,我个人总结为对原型(原型链)和闭包两个基 ...
thinkphp无法加载模块解决办法
前台入口文件index.php <?php //前台入口 define('THINKPHP_PATH', '../ThinkPHP/');//底层的位置 define('APP_PATH', ' ...

临时存存储页面上的数据---js中的cookie

临时存存储页面上的数据---js中的cookie的更多相关文章

随机推荐

热门专题