【原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏】的更多相关文章

原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按钮显示再点击空白地方隐藏</title> <style type="text/css"> #div { border: 1px solid red; display: flex; align-items: center; justify-content: cente…

【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容

引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储    首先考虑用二维数组存储所有行数,列数  →  var  RN=4,CN=4; 然后再定义一个变量data 来保存这个二维数组  →  var  data; 游戏的所有主要执行程序都保存在start()函数下 → 启动游戏 保存存有行数,列数的二维数组到data中    关键代码 ↓ function start(){ data=[]; /…

原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE6,7,8这些低级浏览器的,没有办法,只能自己写一个类似的轮播插件 废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></titl…

原生js实现头像大屏随机显示

效果如下图所示: 一.html部分 <div class="myContainer"> <ul> <li class="first"><img src="images/1.jpg"></li> <li class="second"><img src="images/2.jpg"></li> <li clas…

最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.语法:Object.defineProperty(obj, prop, descriptor)参数obj:要在其上定义属性的对象.prop:要定义或修改的属性的名称.descrip…

DrawRightEditText自定义EditText实现有内容时右侧图标按钮显示无内容时右侧图标按钮隐藏加上为空时晃动动画（二）

经过大神指导,上面封装的还不够全面,触摸事件应该也放进自定义中去,那么问题来了,怎么区分呢!,这就涉及到了自定义属性的介绍了 我通过设置属性来判断在onTouch事件中应该进行什么操作,接下来看看改良的代码 首先在attrs中设置样式 <declare-styleable name="drawrighteditview"> <attr name="edit_type" format="string" /> </dec…

点击除指定区域外的空白处，隐藏div

<script> $(document).click(function (e) { var $target = $(e.target); //点击.zanpl和.quanzipl以外的地方 隐藏.quanzipl和footer if(!$target.is('.zanpl *') && !$target.is('.quanzipl *')) { $('.quanzipl').hide(); $('footer').show(); } }); </script>…

js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路:         1.先将div设置为隐藏,style="display:none":         2.调用javascript脚本showContent()方法:         3.获取传入的id,document.getElementById():         4.改变div…

框架操作DOM和原生js操作DOM比较

问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html ng-app="test"> <head> <title>Performance Comparison for Knockout, Angular and React</title> <link href="//cdnjs.cloud…

一次和别人争吵一个按钮，点击后显示导航；再点击不显示的效果，是否一定以及必须用js?

事情经过是这样的,我们组一个说话很喜欢用一定,肯定的哥们,吃午饭的时候拿了自己做的一个UI库,头部有一个按钮 点击展开,再次点击收缩,他意思说一个按钮无法记录点击状态,必须使用js.然后我看了一眼,心想target有可能能做到这个效果,然后我说不一定,他还是说肯定,还要跟我打赌说:如果我能做出来,给我500块.如果我做不出怎样? 因为到底具体还没有实践过,而且我只是说不一定,所以我没有当场和他打赌,然后他就自己给我定条件说: 如果做不出,你请大家吃顿饭. 听他这么说我就有点不高兴了,你自己说肯定…