大家好，我是前端新秀李步白。今天给大家带来一个js中的小点击案例。
点击每个框，完成与用户的互动。
那么怎么做呢？
首先，我们写一个div，给它一些样式供我们观察。
写完后，效果如下。
接下来你会做什么？我们需要做的是，我们点击这个高度为200的盒子后，让它变成一个高度为500的盒子。再次点击后，让它回到200。
怎么做？看代码。
让我们从脚本标签开始。
再写一行box.onclick=function(){}，这里赋予box的ID名可以直接取用，无需再次声明。意思是，当我的盒子点击时，我需要做什么？需要做什么的行为应该放在括号里。
那我们要做什么？让这个盒子第一次点击，从原来的高度200到高度500。第二次点击从500增加到200。
你需要什么？需要一份判决书。
if(){ }else{ }
这行代码如上图所示，写在function的方括号内。
那么怎么判断呢？如果我点击前高度是200，我点击后就会变。
box . style . height = " 500 px "；
单击后，让该框的高度样式更改为500。如果我点击之前不是200，我点击之后就变成200了。
这行代码在else的括号里。这样写。
box . style . height = " 200 px "；如图所示。
此时，按照上面写的代码，你会发现点击没有反应。因为什么？因为我根本不知道原来的盒子是什么样子，所以我无法做出判断，也无法实施我的改变。
那么这里就需要用到布尔值，因为我们只要两个最终结果，布尔值就是两个结果，一个真一个假。
我们需要添加这样一行代码。设libubai = true
因为这个页面每次刷新的高度都是200，所以我可以用这行代码声明一个变量。默认值为200。然后将变量名添加到if的括号中。
然后你一点，它就会判断，哦，已经两百了，我就实施第一个方案。到200的时候，我再调高一点，变成五百。如下图。
这时候你会发现，再点一下方框也是一样的，方框并没有从500变成200。为什么？虽然箱子变成了500，但是并没有感觉到箱子已经是500的状况。然后我们需要添加一行代码告诉它盒子是500。
in box . style . height = " 500 "；";在这行代码下面添加一行代码。
libubai=false .
因为初始默认变量值是200。在这里，我点击了一次来改变高度，因此变量值从原来的true变为false。因为我们只有两个高度，所以这个false代表500的高度。
也就是说我点了一次，高度变成了500，变量值也得跟上500。同样，当我再次点击时，判断这个框一次。是200吗？如果有，就改成500。显然不是，那么如果实施第二个方案，是不是500？是的，那就200吧。
好吧，我在这里变了。你想跟上那个变量值吗？当然要跟上。已经变成了200，那么200又是默认值，默认值为真。所以，box . style . height = " 200 px "；“在else下一行写着。
libubai=true .
这都是这个小案例的思路和步骤。可能解释不是那么完美。我会努力提高自己。
那么我个人理解这个if和else的括号里的两行代码libubai = ture和libubai=false，是什么作用呢？
有一个很好的对比。这种判断语句是盲目的，看不到形状，只能通过语言理解状态。嗯，我的长相变了，但是你看不到我的帅，你怎么能呢？当然我会自己告诉你，我很帅，然后你就知道我很帅了！hiahiahia .
好了，本期到此结束。下次再见。再见！！！
PS:请自动忽略倒数第三段……
本文来自润情无声投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/535652.html
微信扫一扫 
