超炫背景粒子插件particles.js



<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>NOSQL EYE</title>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/login.css" />
<link rel="stylesheet" href="css/loadingbar.css" />
<link rel="stylesheet" href="css/layer.css" id="layui_layer_skinlayercss"/>

</head>
<body>
<div id="box">
<canvas class="particles-js-canvas-el" 
style="height: 100%;"></canvas>
</div>
<div class="cent-box">
<div class="cont-main clearfix">
<div class="index-tab">
<div class="index-slide-nav" style="width:300px;font-size:25px;color:rgb(15, 136, 235);">
NOSQL EYE
</div>
</div>
<form id="fm" method="post">
<div class="login form">
<div class="group">
<div class="group-ipt email">
<input autocomplete="off" type="text" name="username" id=username
class="ipt easyui-validatebox" placeholder="输入您的用户名"
data-options="required:true">
</div>
<div class="group-ipt password">
<input autocomplete="off" type="password" name="password" id="password"
class="ipt easyui-validatebox" placeholder="输入您的密码"
data-options="required:true">
</div>
</div>
</div>


<div class="button">
<input type="button" value="登录" name="commit"
class="login-btn register-btn" id="submit" />
</div>
<div class="group-ipt">
<div class="alert alert-danger" role="alert" style="margin-top:15px;width:300px;height:50px;font-size:12px;display:none;" id="alert"></div>
</div>
</form>
</div>
</div>


<div class="footer">
<p>2017 &copy; NOSQL EYE</p>
</div>
<script src="script/jquery-1.11.1.min.js"></script>
<script src="script/jquery.cookie.js"></script>
<script src="script/jquery.loadingbar.js"></script>
<script type="text/javascript">
$(function($) {
//响应回车键登录
$("body").keydown(function() {
            if (event.keyCode == "13") {
            $("#submit").click();
            }
        });
});

</script>
<script type="text/javascript">
//开启进度条,执行登录
$("#submit").loadingbar({
 dataType: "json",
 success: function(json) {
 if(json.code=="200"){
 $.cookie('DBEYE-FOR-NOSQL-ADMIN', json.data);
 $(window).attr('location','/index.html');
 }
 else{
 $("#alert").html(json.message);
 $("#alert").show();
 }
 }

});
//执行ajax前的操作并返回请求的url地址
function ajaxBeforeAndReturnUrl() {
  $("#alert").hide();
  var username=$("#username").val();
  var password=$("#password").val();
  var url="/api/login?username="+username+"&password="+password;
  return url;
 }
  </script>
 
  <!-- 动画背景 -->
  <script src="script/particles.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
<script src="script/layer.js" type="text/javascript"></script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/rdhj5566/article/details/77894141
今日推荐