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

随机推荐

android pcm
Android.media package里包含声音录放的两个类AudioRecord和AudioTrack.前者用来录制,后者用来播放. 配置 pcm: int channel = AudioFor ...
【BZOJ】2741: 【FOTILE模拟赛】L
题意:给定一个长度为n的序列,m次询问,每次询问一个区间[l, r],求max(Ai xor Ai+1 xor Ai+2 ... xor Aj),其中l<=i<=j<=r.(n< ...
SRM 595 DIV2 1000
数位DP的感觉,但是跟模版不是一个套路的,看的题解,代码好理解,但是确实难想. #include <cstdio> #include <cstring> #include &l ...
ajax教程完整版
第 1 页 Ajax 简介 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本文的作者是 ...
PHP面向对象学习五类中接口的应用
类中接口的应用接口:一种成员属性全部为抽象的特殊抽象类,在程序中同为规范的作用抽象类:1.类中至少有一个抽象方法.2.方法前需要加abstract 接口: 1.类中全部为抽象方法,抽象方法前不 ...
C语言break和continue
break和continue C语言中有有两种结束循环的关键字:break和continue #include <stdio.h> #include <stdlib.h> in ...
Cento 安装配置FastFDS
unzip -x libfastcommon-master.zip ./make.sh ./make.sh install /usr/include/fastcommon cd FastDFS ./m ...
GO语言练习：channel 缓冲机制
1.代码 2.运行 3.解析 1.代码 buffer.go package main import ( "fmt" "time" ) func readThre ...
Background agent
Periodic Task Periodic agents run for a small amount of time on a regular recurring interval. Typica ...
CSS样式优化
一.css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的cs ...

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

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

随机推荐

热门专题