昨天寫的登入界面互動感不強，所以今天加入一些JavaScript，想實作點擊一個登入按鈕就可以出現登入界面，
1.添加一個登入的按鈕，并確定樣式
.login
{
position: fixed;
border-radius: 10px;
background: gray;
width: 60px;
height: 24px;
top: 10%;
right: 25%;
text-align: center;
}2.加入JavaScript，并將之前的登入界面先隱藏
var login = document.querySelector('.login');
login.onclick=function() //登入
{
var loginIN = document.querySelector('.loginIN');
loginIN.style.display = 'block';
}
var exist = document.querySelector('.exist');
exist.onclick = function() //關閉
{
var loginIN = document.querySelector('.loginIN');
loginIN.style.display = 'none';
}3.美化滑鼠樣式
.login:hover
{
cursor: pointer;
}
.exist:hover
{
cursor: pointer;
}效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335152.html
標籤：其他
上一篇：vue中的this指向問題