javascript及jquery快速入门Demo

做一个加法运算Demo:

Demo1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.4.0.min.js"></script>
<title>Div Box Add</title>
<script type="text/javascript">
$(function(){
	$("#SumNum").click(function(){
    var a=$("#FirstNum").text();
	var b=$("#SecondNum").text()
	var c=parseInt(a)+parseInt(b);
	$("#SumNum").text(c);	
	});
  })
</script>
</head>

<body>
<div id="FirstNum">1</div>
<div id="SecondNum">2</div>
<div id="SumNum">点击此处!</div>
</body>
</html>

Demo2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.4.0.min.js"></script>
<title>Input Box Add</title>
<style type="text/css">
.red{
	color:red;
}
</style>
<script type="text/javascript">
$(function(){
	$(".btn").click(function(){
    var a=$(".FirstNum").val();
	var b=$(".SecondNum").val()
	var c=parseInt(a)+parseInt(b);
	$(".SumNum").val(c);	
	$(".tip").html("<b>你太棒了</b><hr>100分!");	
	$(".tip").addClass("red");
	$(".SumNum").addClass("red");
	});
  })
</script>
</head>
<body>
<h2 class="tip">您好!</h2>
<input name="FirstNum" type="text"  class="FirstNum" value="0">
<input name="SecondNum" type="text" class="SecondNum" value="0">
<input name="SumNum" type="text" Class="SumNum" value="0">
<button class="btn">显示结果</button>
</body>
</html>

Demo3:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.mygreen{
	color:green;
}
.myred{
	color:red;
}

</style>
<script src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".btn").click(function(e) {
       var a=$(".FirstNum").val();
	   var b=$(".SecondNum").val();
	   var d=$(".SumNum").val();
	   var c=parseInt(a)+parseInt(b);
	   var e=parseInt(d);
	   if(c==e)
	   {
		   $("#tip").text("Bingo!")
	   }
	   else
	   {
		     $("#tip").text("fool!")
	   }
	   $(".SumNum").removeClass("mygreen");
	   $(".SumNum").addClass("myred");
    });	
	})
</script>
</head>
<body>
<h2 id="tip">您好!</h2>
<input class="FirstNum" name="FirstNum" type="text" value="0">
<input class="SecondNum" name="SecondNum" type="text" value="0">
<input class="SumNum" name="SumNum" type="text" value="0">
<button class="btn">计算</button>
</body>
</html>

Demo4:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>最后课堂作业:加法游戏</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
}
.setgif {
	width: 20%;
	height: 20%;
	background-image: url(gif/lookfarward.gif);
	background-size: 100% 100%;
}
.happygif {
	width: 20%;
	height: 20%;
	background-image: url(gif/happy.gif);
	background-size: 100% 100%;
}
.angrygif {
	width: 20%;
	height: 20%;
	background-image: url(gif/tigerAngry.gif);
	background-size: 100% 100%;	
}
table {
	width: 40%;
	height: 40%;	
	text-align: center;
}
td {
	border: solid 1px grey;
}
.mygreen {
	color: green;
}
.myred {
	color: red;
}
</style>
<script src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){	
	var cnt=0;
var  right=0;
var  wrong=0;
	$(".set").click(function(e){
       var a=Math.floor((Math.random()*100)+1); 
	   var b=Math.floor((Math.random()*100)+1); 
	   $(".FirstNum").val(a);
	   $(".SecondNum").val(b);
	   $("#tip").text("请看题目");
	   $("#gif").removeClass();
	   $("#gif").addClass("setgif");
	   $(".SumNum").removeClass();
	   $(".SumNum").addClass("mygreen");
    });		
	
	$(".btn").click(function(e){
		  var ss=$("#SumNum").val()		  
		   var aa=$(".FirstNum").val();
		  var bb=$(".SecondNum").val();
	   var cc=parseInt(aa)+parseInt(bb);
	   var sss=parseInt(ss);	
	   if(cc==sss)
	   {		
		   right=right+1;		   
		   $("#tip").text("Bingo!");
		   $("#gif").removeClass();
		   $("#gif").addClass("happygif");
		   $(".rightcnt").text(right);
	   }
	   else
	   {
		     $("#tip").text("fool!");
			 wrong=wrong+1;
			 $("#gif").removeClass();
		     $("#gif").addClass("angrygif");
		     $(".wrongcnt").text(wrong);
	   }
	   $(".SumNum").removeClass("mygreen");
	   $(".SumNum").addClass("myred");
	   cnt=cnt+1;
	   $(".allcnt").text(cnt);
    });	
	})
</script>
</head>
<body>
<div id="gif" class="setgif"></div>
<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width:50%;">运算次数:</td>
    <td class="allcnt" style="width:50%;">0</td>
  </tr>
  <tr>
    <td style="width:50%;">正确次数:</td>
    <td class="rightcnt" style="width:50%;">0</td>
  </tr>
  <tr>
    <td style="width:50%;">错误次数:</td>
    <td class="wrongcnt" style="width:50%;">0</td>
  </tr>
</table>
<h2 id="tip">您好!</h2>
<input name="FirstNum" type="text" class="FirstNum" value="0" readonly />
<span>+</span>
<input name="SecondNum" type="text" class="SecondNum" value="0" readonly />
<span>=</span>
<input   id="SumNum" class="SumNum" name="SumNum" type="text" value="0">
<br/>
<br/>
<button class="set">随机出题</button>
<br/>
<br/>
<button class="btn">核对结果</button>
</body>
</html>

其中的jquery-3.4.0.min.js下载地址->

动态gif素材下载->

javascript及jquery快速入门Demo

猜你喜欢