javascript学习笔记2：按钮练习

最新推荐文章于 2024-07-17 15:26:15 发布

shanshuisheng

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量118

点赞数

分类专栏：前端 js 文章标签： js 前端

本文链接：https://blog.csdn.net/shanshuisheng/article/details/80919315

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

开关按钮互相转变练习1

注：黑马的js视频学习笔记

方法1黄色，方法2红色

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
//让页面出现星星
function fn(){
  var obj=document.getElementById("d1");
  var v=obj.value;
  if(v=="开"){
  obj.value="关";
  }else{
  obj.value="开";}
}
var i=0;
function fn2(){
  
  var obj=document.getElementById("d2");
 
  if(i%2==0){
  obj.value="关";
    i++;
  }else{
  obj.value="开";
      i++;
  }

}

</script>
</head>
<body >
 <input id="d1" type="button" value="开" οnclick="fn()"/>
 <input id="d2" type="button" value="开" οnclick="fn2()"/>
</body>
</html>

方法3 使用布尔值

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
//开关按钮练习
function fn(){
  var obj=document.getElementById("d1");
  var v=obj.value;
  if(v=="开"){
  obj.value="关";
  }else{
  obj.value="开";}
}
var i=0;
function fn2(){
  
  var obj=document.getElementById("d2");
 
  if(i%2==0){
  obj.value="关";
    i++;
  }else{
  obj.value="开";
      i++;
  }

}


var  flag=true;
function fn3(){
  
  var obj=document.getElementById("d3");
 
  
  if (flag==true){
  obj.value="开";
    flag=false;
  }else{
  obj.value="关";
  flag=true;
  }
  
  
}
</script>
</head>
<body >
 <input id="d1" type="button" value="开" οnclick="fn()"/>
 <input id="d2" type="button" value="开" οnclick="fn2()"/>
 <input id="d3" type="button" value="开" οnclick="fn3()"/>
 
</body>
</html>

方法4：使用this：代表当前对象

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
 
}
function fn4(obj){
  
  var v=obj.value;
  if(v=="开"){
  obj.value="关";
  }else{
  obj.value="开";}

}
</script>
</head>
<body >
 <input id="d4" type="button" value="开" οnclick="fn4(this)"/>
 
</body>
</html>

this关键字的使用

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
 function fn(obj){
 var  n=parseInt(obj.value);
 n++;
 obj.value=n;
 
 }
</script>
</head>
<body >
 <input type="button" value="1" οnclick="fn(this)"/>
 <input type="button" value="2" οnclick="fn(this)"/>
 <input type="button" value="3" οnclick="fn(this)"/>
 <input type="button" value="4" οnclick="fn(this)"/>
 
</body>
</html>

shanshuisheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记2：按钮练习

开关按钮互相转变练习1注：黑马的js视频学习笔记方法1黄色，方法2红色&lt;!DOCTYPE html&gt;&lt;html &gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt; 漫天小星星练习&lt;/title&gt;&lt;style type="text/css"&gt;&
复制链接

扫一扫