[游戏开发] JS例子，轮播图猜数字小游戏，运行的时钟

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> JS例子，轮播图猜数字小游戏，运行的时钟 -> 正文阅读

[游戏开发]JS例子，轮播图猜数字小游戏，运行的时钟

轮播图(手动）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点亮张家</title>   
<style type="text/css">
#next,#last{
	width:80px;
	height:40px;
}
</style>
</head>

<body>
<img src="001.jpg" id="Myimg" />
<button id="next">Next</button>
<button id="last">Last</button>
<script type="text/javascript">
var image=document.getElementById('Myimg');
var next=document.getElementById('next');
var last=document.getElementById('last');
var nowIndex=1;
var count=3;
next.onclick=function(){
	if(nowIndex+1>3){
		nowIndex=1;
	}
	else
	{
		nowIndex++;
	}
	image.src="00"+nowIndex+".jpg";
}
last.onclick=function(){
	if(nowIndex-1<1){
		nowIndex=3;
	}
	else{
		nowIndex--;
	}
	image.src="00"+nowIndex+".jpg";
}
</script>
</body>
</html>

猜数字小游戏

先猜个1到10之间的吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>猜数字1到10之间的数字</title>   
<style type="text/css">

</style>
</head>

<body>

<script type="text/javascript">
var name=Math.floor(Math.random()*10+1);
do{
	var guess=parseInt(prompt("请输入1到10之间你猜整的数:",""));
	//parseInt() 函数可解析一个字符串，并返回一个整数。
	if(guess==name){
		alert("恭喜！猜对了！！");
		break;
	}
	else if(guess>name){
		alert("你猜的数有点大");
		go_on=confirm("是否继续游戏？");//confirm是一个带确认和取消的对话框
	}
	else{
		alert("你猜的数有点小");
		go_on=confirm("是否继续游戏？");
	}
}while(go_on);
alert("谢谢参与游戏");

</script>
</body>
</html>

自动轮播图（自动）

定时器：setInterval:按照指定周期（以毫秒计）来调用函数或计算表达式，方法会不停的调用函数，直到clearInterval被调用
在这里插入图片描述
用setInterval写了个简单的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
<style type="text/css">

</style>
</head>

<body>
<img src="001.jpg" id="myimg" />

<script type="text/javascript">
var img=document.getElementById('myimg');
var Index=1;
var count=3;
var mytime=setInterval(clock,300);//这里的clock就相当于一个参数，并不用使
//用函数的调用，就是不用加上小括号
function clock(){
	if(Index+1>count)
		Index=1;
	else
		Index++;
	img.src="00"+Index+".jpg";
}
</script>
</body>
</html>

运行的时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运行的时钟</title>   
<style type="text/css">

</style>
</head>

<body onload="clock()">
<span id="yeartime"></span>

<script type="text/javascript">
function clock(){
var date=new Date();//获取现在的时间
var year=date.getFullYear();
var month=date.getMonth()+1;//返回值是0到11，所以输出时加1
var day=date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
if(hour<10)
	hour='0'+hour;
if(minute<10)
	minute='0'+minute;
if(second<10)
	second='0'+second;
document.getElementById('yeartime').innerHTML= year+"年"+month+"月"+
day+"日"+hour+":"+minute+":"+second;

var mytime=setTimeout("clock()",1000);
}
</script>
</body>
</html>