登录  /  注册
博主信息
博文 22
粉丝 0
评论 7
访问量 31253
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
动态登录界面
阿杰网络科技博客资源站
原创
1283人浏览过


Demo.png

实例

Demo.png<html lang="aj.html">

<head>

<title>动态登录</title>

<!-- 背景音乐 -->

<audio autoplay="" loop=""><source src="F:\Domo\Demo\Music/background.mp3"></audio>

<!-- ico图标 -->

<link rel="shortcut icon" href="F:\Domo\Demo\ico/aj.ico" />

<!-- Meta tag Keywords -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8" />

<meta name="keywords" content="2005"/>

<script>

!function(e, t, a) {

function r() {

for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");

requestAnimationFrame(r)

}

function n() {

var t = "function" == typeof e.onclick && e.onclick;

e.onclick = function(e) {

t && t(),

o(e)

}

}

function o(e) {

var a = t.createElement("div");

a.className = "heart",

s.push({

el: a,

x: e.clientX - 5,

y: e.clientY - 5,

scale: 1,

alpha: 1,

color: c()

}),

t.body.appendChild(a)

}

function i(e) {

var a = t.createElement("style");

a.type = "text/css";

try {

a.appendChild(t.createTextNode(e))

} catch(t) {

a.styleSheet.cssText = e

}

t.getElementsByTagName("head")[0].appendChild(a)

}

function c() {

return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"

}

var s = [];

e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||

function(e) {

setTimeout(e, 1e3 / 60)

},

i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),

n(),

r()

} (window, document);

</script>

<script>

function aa(){

//调用获取:userName;passWord;userName1;passWord1。

var userName = document.getElementById("userName");

var passWord = document.getElementById("passWord");

var userName1 = userName.value;

var passWord1 = passWord.value;

//判断用户登录

if(userName1=="aj668"&&passWord1=="abc668"){

alert("登录成功!")

//登录成功后跳转页面

window.open("F:\\Domo\\Demo\\personal blog/index.html");

// $("F:\Domo\moban3007\个人博客/index").load("index.html");

}else{

alert("登录失败!")

}

}

addEventListener("load", function () {

setTimeout(hideURLbar, 0);

}, false);



function hideURLbar() {

window.scrollTo(0, 1);

}

</script>

<!-- Meta tag Keywords -->

<!-- css files -->

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

<!-- Style-CSS -->

<link rel="stylesheet" href="css/fontawesome-all.css">

<!-- Font-Awesome-Icons-CSS -->

<!-- //css files -->

<!-- web-fonts -->

<link href="http://maxcdn.bootstrapcdn.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">

<link href="http://maxcdn.bootstrapcdn.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

<!-- //web-fonts -->



</head>



<body>



<!-- bg effect -->

<div id="bg">

<canvas></canvas>

<canvas></canvas>

<canvas></canvas>

</div>

<!-- //bg effect -->

<!-- title -->

<h1>阿杰后台登录</h1>

<!-- //title -->

<!-- content -->

<div>

<form action="#" method="post">

<h2><font size="7px">登 录</font>

<i class="fas fa-level-down-alt"></i>

</h2>



<div>

<label>

<i class="fas fa-user"></i>

用户名

</label>

<input placeholder="请输入用户名" name="Name" type="text" required="" id="userName">

</div>

<div>

<label>

<i class="fas fa-unlock-alt"></i>

密码

</label>

<input placeholder="请输入密码" name="Password" type="password" required="" id="passWord">

</div>

<!-- checkbox -->

<div>

<ul>

<li>

<label>

<input type="checkbox" required="">

<span>记住密码</span>

</label>

</li>

<li>

<a href="123.html">忘记密码?</a>

</li>

</ul>

</div>

<!-- //checkbox -->

<input type="submit" value="登录" onclick="aa()">

</form>

</div>

<!-- //content -->



<!-- copyright -->

<div>

<p>Copyright © 2017-2019|  <a href="http://www.eb89.com/web.php?id=EV4rxY8"><font color="purple">阿杰网络科技</font></a></a>

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1276322192'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s96.cnzz.com/z_stat.php%3Fid%3D1276322192%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script></p> 

</div>

<!-- //copyright -->



<!-- Jquery -->

<script src="js/jquery-3.3.1.min.js"></script>

<!-- //Jquery -->



<!-- effect js -->

<script src="js/canva_moving_effect.js"></script>

<!-- //effect js -->



</body>



</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学