从有趣的例子学JavaScript

最新推荐文章于 2022-12-04 00:31:30 发布

新白者

最新推荐文章于 2022-12-04 00:31:30 发布

阅读量945

点赞数 1

分类专栏： js 文章标签： java js

本文链接：https://blog.csdn.net/qq_44830627/article/details/105261395

版权

js 专栏收录该内容

30 篇文章 4 订阅

订阅专栏

有趣的例子

例子1：灯泡变颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点亮灯泡</title>
	</head>
	<body>
		<script>
			function changeImage()
			{
				var element=document.getElementById('myimage');
					if(element.src.match("yellow"))//找到含有light的子串，找到就显示下面这个不亮的灯泡
					{
						element.src="../img/blue.jpg";
					}
					else
					{
						element.src="../img/yellow.jpg";
					}
			}
		</script>
		<img id="myimage"  src="../img/yellow.jpg" onclick="changeImage()" alt="my image gallery "><!-- alt标签是为了当网络不好的时候，没加载出来，可以给个提示-->
	
		<p>点击灯泡就可以改变灯泡的颜色</p>	
	</body>
</html>

在这里插入图片描述

【说明】：通过点击，这两个灯泡可以来回变换

例子2：图片转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#image{
			display: block; <!--block块对象的默认值,将对象强制作为块对象呈递,为对象之后添加新行-->
			width: 600px;
			height: 700px;
			margin: 50px auto;/*auto:居中  */	
			/*margin :如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
			如果只提供一个，将用于全部的四边。
			如果提供两个，第一个用于上－下，第二个用于左－右。
			如果提供三个，第一个用于上，第二个用于左－右，第三个用于下
			*/
		}
		#next{
			margin-left: 750px;<!--设置next的左外边距为750px-->
		}
	</style>
	<body>
		<img src="img/1.jpg" id="image"/>
		<button id="next">next</button> <!--一个按钮，名为next ，下一张图片-->
        <button id="prev">prev</button> <!--另一个按钮，名为prev 上一张图片-->
		<script>
			var image=document.getElementById('image');//getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
			var next=document.getElementById("next");
			var prev=document.getElementById('prev');
			var nowIndex=1;
			var count=6;
			next.onclick=function(){
				nowIndex=nowIndex+1>count?1:nowIndex+1;
				image.src="img/"+nowIndex+".jpg";
			}
			prev.onclick=function(){
				if(nowIndex-1<0){
					nowIndex=count;
				}
				else{
					nowIndex--;
				}
				image.src="img/"+nowIndex+".jpg";
			}
		</script>
	</body>
</html>

例子3：prompt实现求矩形的周长和面积

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var height=prompt("请输出矩形的长:");
			var width=prompt("请输入矩形的宽:");
			alert("矩形的周长为:"+2*(parseFloat(height)+parseFloat(width)));
			alert("矩形的面积为:"+height*width);
		</script>
	</body>
</html>

java中实现求周长面积：

import java.util.Scanner;
public class HelloWorld {
	public static void main(String[]args){
           Scanner scanner=new Scanner(System.in);
           System.out.println("请输入矩形的长：");
           int h=scanner.nextInt();
           System.out.println("请输入矩形的宽：");
           int w=scanner.nextInt();
           System.out.println("矩形的周长为："+2*(h+w));
	       System.out.println("矩形的面积为："+h*w);
	}
}

在这里插入图片描述

例子4：猜数字

random()方法返回介于0(包含)~1(不包含)之间的一个随机数
Math.random()*10取得介于0到10(不包含)之间的一个随机数
floor(x)方法返回小于等于x的最大整数，如果传递的参数是一个整数，该值不变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var num=Math.floor(Math.random()*100+1);//产生1~100之间的随机整数
			do{
				var guess=parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数: "));
				if(guess==num){
					alert("恭喜你猜对了,幸运数字是:"+num);
					break;
				}
				else{
					if(guess>num){
						alert("你猜的数字大了");
						go_on=confirm("是否继续游戏?");
					}
					else{
						alert("你猜的数字小了");
						go_on=confirm("是否继续游戏?");
					}
				}
			}while(go_on);
			alert("谢谢参与游戏!");
		</script>
	</body>
</html>

java实现猜数

import java.util.Random;
import java.util.Scanner;
public class HelloWorld {
	public static void main(String[]args){
		int i=0;
        Random random=new Random();
        int a=random.nextInt(100)+1;//随机生成1到100之间的一个数
        do{
        	Scanner scanner=new Scanner(System.in);
        	System.out.println("输入你要猜的数：");
        	int ss=scanner.nextInt();
        if (ss==a) {
			System.out.println("恭喜你猜对了，你的幸运数字是"+a);
			break;
		}
        else {
			if(ss>a){
				System.out.println("你猜的数字大了");
			}
			else {
				System.out.println("你猜的数字小了");
			}
		}
       i++;
        }
        while(i<10);
        System.out.println("谢谢参与游戏！");
	}
}

在这里插入图片描述

例子5:9x9乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<script>
				for (var i = 1; i <= 9; i++) {
					document.write("<tr>");
					for (var j = 1; j <= i; j++) {
                    document.write('<td>'+j+'x'+i+'='+j*i+'</td>');
					}
					document.write('</tr>');
				}			
			</script>
		</table>
	</body>
</html>

在这里插入图片描述
java实现99乘法表：

public class HelloWorld {
	public static void main(String[]args){
		for (int i = 1; i <=9; i++) {
			for (int j = 1; j <=i; j++) {
				System.out.print(j+"x"+i+"="+j*i+"\t");
			}
			System.out.println();
		}
	}
}

在这里插入图片描述