在js使用Booleans的单个事件处理程序上的两个事件

创建脚本时,您经常会发现有一些用户“事件”,例如用户将鼠标移到某个元素上或单击要让脚本作出反应的特定元素。你这样做的方式是通过使用事件处理程序。

在本教程中,我们将学习如何让脚本对使用布尔值的单个元素上的两个不同的函数进行反应。

布尔值是1(True)或0(False),看看如何在javascript中声明布尔值,参见下面的代码段

var bool1 = true;

var bool2 = false;

现在在本教程中,我们将制作一个可以使用单个按钮切换的滑动div。

现在,让我们来构建我们简单的滑块系统,使一个新的文件slider.html并键入下面的代码到你的HTML文件。

slider.html

slider

click me

让我们以上面的HTML代码的形式创建一个新的文件style.css并添加以下代码(更好地尝试键入下面的代码,而不是进行复制和粘贴)

style.css

#slider{width:200px;height:200px;background:red;margin:auto;font-family:verdana;color:white;transition:0.2s;}

#button{width:90px;padding:10px;color:green;border:5px solid green;margin:10px auto auto auto;font-family:verdana;text-align:center;cursor:pointer;}

现在是一段时间了,我们将添加我们的JavaScript代码,这将执行上述的滑动操作div

script.js

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

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

var click = false;

button.onclick = function(){

if(click==false){

slider.style.height = 0;

click = true;

}else{

slider.style.height = 200+"px";

click = false;}

}

上面的脚本使用布尔选择一个单独的动作,这个动作是在true和false的基础上完成的。

请参阅上述代码

谢谢你的阅读

了解更多资讯请关注我的微信公众号:芒果web;或者微信搜索javascriptes6关注我们

将您的查询和反馈发送到微信公众号或在我们的QQ群634109637群交流。您也可以在下面评论您的问题。

另外,别忘了订阅我们的简书。

如果你喜欢这篇文章,那么请分享一下,帮助我们成长。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,368评论 19 139
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,289评论 1 10
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 34,253评论 18 399
  • 我很早地来到学校,看到了我的同学高翔。我和高翔一起玩了会,这时老师来了,老师带我们进了教室。我们放下书包,...
    杨尚峰阅读 275评论 0 0
  • 16-01-03 星期日 阴雨天 01天 烟火寻常之买菜记 应小朋友之约。 在元旦假期的最后一天,自己动手,为父母...
    年念玲阅读 342评论 0 0

友情链接更多精彩内容