百度新闻的的登录框怎么用js写
时间: 2023-06-25 10:01:59 浏览: 51
百度新闻的登录框可以使用以下代码实现:
HTML部分:
```
<div class="login-box">
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登录">
</form>
</div>
```
CSS部分:
```
.login-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
}
```
JavaScript部分:
```
var loginBox = document.querySelector('.login-box');
var openBtn = document.querySelector('.open-btn');
var closeBtn = document.querySelector('.close-btn');
// 打开登录框
openBtn.addEventListener('click', function() {
loginBox.style.display = 'block';
});
// 关闭登录框
closeBtn.addEventListener('click', function() {
loginBox.style.display = 'none';
});
// 提交登录表单
var form = loginBox.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
var username = form.querySelector('#username').value;
var password = form.querySelector('#password').value;
// 进行登录操作
});
```
其中,`.login-box` 为登录框的样式,`.open-btn` 为打开登录框的按钮,`.close-btn` 为关闭登录框的按钮。JavaScript部分实现了打开、关闭登录框以及提交登录表单的操作。需要根据实际情况进行修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)