Question

我想显示一个表单，如果他们没有登录，则会询问用户名的首字母和性别。

如果他们已经登录，我想显示他们的名字，并给他们旋转的赞美，并可能显示旋转背景，具体取决于他们的性别。

以下是我的代码。

    <!DOCTYPE html>
<html>
<head>
<title>You are wonderful!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
 background: http://news.bbcimg.co.uk/media/images/64073000/jpg/_64073342_190475.jpg;
}
body, h1, p {
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.introform {
    margin-left:  auto;
    margin-right:  auto;
    display: block;
    width:300px;
    text-align:left;
}
.username {
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-size:250%;
    padding:40px;
}
.compliments {
    font-weight:600;
    font-size:40px;
    display:none;
}
.container {
    margin-left:  auto;
    margin-right:  auto;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    text-align:center;
}
.row:before, .row:after {
    display: table;
    content: " ";
}
.heart {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Love_Heart_SVG.svg/645px-Love_Heart_SVG.svg.png");
    background-size: 180px 160px;
    background-repeat: no-repeat;
    margin-top:20px;
    width:180px;
    height:160px;
    text-align:center;
    margin-left:  auto;
    margin-right:  auto;
    display:none;
}
h1 {
    font-weight: 300;
    margin: 0 0 20px 0;
}
.lead {
    font-size: 21px;
    font-weight: 200;
    margin-bottom: 20px;
}
p {
    margin: 0 0 10px;
}
a {
    color: #3282e6;
    text-decoration: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body background="http://news.bbcimg.co.uk/media/images/64073000/jpg/_64073342_190475.jpg">
<div class="container text-center" id="error">


  <div class="introform">
  <h1>Please fill out the form below and<br>let us know your name and gender.</h1>
    <form method='post' action='send.php' name='demo'>
      First Name:
      <input type='text' name='FirstName' value='' id='FirstName' />
      <br/>
      Gender:
      <select name='gender'>
        <option value='Male'>Male</option>
        <option value='Female'>Female</option>
      </select>
    </form>
  </div>
  <div class="heart">
    <p class="username"></p>
  </div>
  <div class="compliments"> You are wonderful!<br/>
    You are beautiful!<br/>
    Love you, love you, love you! </div>
</div>
</div>
</div>
</body>
</html>

Answer 1

首先定义一个获取cookie的函数

getCookie = function(cookieName)
{
    var allCookies = document.cookie.split(';');
    for(var key in allCookies) 
    {
        var Cookie = allCookies[key].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        if (Cookie.indexOf(cookieName+"=") == 0) 
            return Cookie.substring((cookieName+"=").length,Cookie.length)
    }
    return null;
}

然后你测试是否设置了cookie，然后如果没有设置你的cookie就隐藏你的表单

$(document).ready(function(){
   if(getCookie("cookiekey")==null)
     $("form[name=demo]").hide();
});

Jquery - 如果未设置cookie，则需要显示表单。如果设置了cookie，则显示用户名

1 个答案: