js点击事件 登录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script type="text/javascript">
window.onload=function(){
var btn=document.querySelector("button");
btn.onclick=function(){
var box=document.querySelector(".box");
box.style.display="flex";
}
var close=document.querySelector(".close");
close.onclick=function(){
var box=document.querySelector(".box");
box.style.display="none";
}
}
// document.querySelectorAll() 找全部
// 配合 遍历使用 找到所以button
// document.querySelector()找一个
</script>
</head>
<body>
<button type="button">显示登录框</button>
<div class="box">
<div class="content">
<span class="close">×</span>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body,
.box{
width: 100%;
height: 600px;
}
body {
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.333);
display: flex;
justify-content: space-around;
align-items: center;
display: none;
}
.box .content .close{
float: right;
width: 16px;
display: block;
}
.box .content{
width: 750px;
height: 380px;
background-color: #FFFFFF;
}
// document.querySelectorAll() 找全部
// 配合 遍历使用 找到所以button
// document.querySelector()找一个
面试题:
js点击事件 登录的更多相关文章
- 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- JS中点击事件冒泡阻止
JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...
- IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以
IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.
- js点击事件防止用户重复点击执行
点击事件里给button标签加一个自定义属性,存上次点击时间 追问: 求详细代码,JS 真心的没怎么做过 追答: <input type="button" id=&quo ...
- js点击事件,数字累加
<!doctype html><html lang="en"><head> <meta charset="utf-8&qu ...
- JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
- JS - 点击事件排除父级标签
点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...
- JS点击事件的重叠处理(多个点击事件出现冲突)
最近开发遇见了一个这个样的情况,一个button在一个div中,点击buton是一个事件,点击大的div也是一个事件,但是由于button在div中,点击button会把两个事件都执行了,但是我们想点 ...
- js点击事件在苹果端失效的问题
在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定 ...
随机推荐
- 微信小程序函数间传递url的参数丢失问题
可以使用encodeURIComponent():函数可把字符串作为 URI 组件进行编码. 可以使用decodeURIComponent():函数可把字符串作为 URI 组件进行解码.
- Spirit带你了解CSS各个方向的居中方案
水平居中和垂直居中的方案 先看HTML的骨架 后面的代码都是基于这个来写的 <!DOCTYPE html> <html lang="en"> <hea ...
- 安装VM-TOOLS,解压tar包时提示目录磁盘空间不足
在虚拟机里安装了ubuntu-18.04.4-desktop-amd64,安装VM-TOOLS,解压tar包时提示目录磁盘空间不足. 解决方法一: 打开terminal,输入:sudo apt ins ...
- navicat导出DDL语句
工作中有的时候需要将某个库中的表.视图.函数.存储过程等创建语句导出,又不需要表中的数据. 方法一:需要拷贝的创建语句条数不多,可以选择直接拷贝DDL语句 方法二:使用Navicat的备份功能
- centos实现免密登陆及远程操作
----------------------------**********------------------------------------------------- 免密码登陆 第一步: 执 ...
- 利用griddata进行二维插值
有时候会碰到这种情况: 实际问题可以抽象为 \(z = f(x, y)\) 的形式,而你只知道有限的点 \((x_i,y_i,z_i)\),你又需要局部的全数据,这时你就需要插值,一维的插值方法网上很 ...
- centos7配置bind重启后错误解决
最近研究centos7安装bind做DNS服务器,都配置好了后,重启后用systemctl status named 发现好多诸如以下错误:error (network unreachable) re ...
- 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外部发言人 | 百篇博客分析OpenHarmony源码 | v55.01
百篇博客系列篇.本篇为: v55.xx 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外部发言人 | 51.c.h.o 加载运行相关篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | 应用程 ...
- T-SQL——关于SQL打开Excel文件
目录 0. 背景说明 1. 安装Access Database Engine 1. SQL脚本 3. .net项目中通过Micsoft.ACE.oledb读取Excel文件 志铭-2021年10月1日 ...
- Java程序的执行过程
Java程序的执行过程 编译器将 Java 源代码编译成字节码class文件 类加载到 JVM 里面后,执行引擎把字节码转为可执行代码 执行的过程,再把可执行代码转为机器码,由底层的操作系统完成执行