到五秒就停下—公开课教案

JavaScript

web

发布日期: 2025-05-30

更新日期: 2025-06-17

文章字数: 1.8k

阅读时长: 7 分

阅读次数:

前言

感谢各位老师、领导、专家莅临指导，不胜荣幸

各位老师手上拿到的资料，既是教案，也是学生学习的笔记，和学生看到的一样。

因为本人记忆力越来越糟糕，经常上课到一半，突然忘记后面该干嘛（甚至包括公开课的时候），于是就把上课的内容提前发布到笔记平台，一边上课一边看，结果效果出奇的还不错。

回想我的学生时代，也常常走神，也会因为PPT翻页速度太快而产生焦虑，最后干脆摆烂，所以我实在不忍心以这一原因去责怪学生。在教案平台，上面几乎有详细的步骤、解析和原理，毕竟我必须保证我自己也能通过这个东西完成任务，书写代码，如果要用到之前的知识，也可以很方便地翻出来查看。

我的编排都是任务式的，以完成任务为目的去学习知识点，完成了诸多小任务之后，我又会带学生做一个综合的大项目。

总之，各位专家也可以登录到这个网站，xiaolily.cn，在笔记中找到这篇教案，甚至可以通过操作步骤完成这个游戏，完整体验整个过程。（账号名：体验账号，密码：666666）

这些都是我自己瞎琢磨出来的土方法，也没有经过系统的论证，如有不足之处还望不吝指出，感谢！

一、情境导入（3分钟）

观看视频：周大生玩游戏送金条游戏反悔

提问：

你是如何评价周大生的行为，是否符合道德？

看看网友怎么说：

网友揭秘程序其实可以作弊，提前铺垫扩展任务的情境

二、试玩游戏（2分钟）

在xiaolily.cn网站中，打开友链，访问我的友链，体验实际效果

说明：

每次在做新的网页之前，我都会将我做好的成品放到我的友链，这样学生是以最直观的方式去感受，理解本次课的任务是什么，方便随时参考，但是我不希望每个学生都模仿得和我一样，每个学生都可以在平台上搭建出专属于自己的友链，去展示自己独特的创意，参与到做网站的快乐。

三、新课讲解（10分钟）

函数的定义

函数是一段可重复调用的代码块

基本语法

function 函数名(参数1,参数2,...){
    函数体
}

案例展示

function a(){
    alert('a函数里的代码被执行了')
}
function b(){
    alert('b函数里的代码被执行了')
}

在上述案例中，a函数和b函数虽然已经被定义了，但是却没有被调用，函数不会执行。

函数的调用

直接调用

直接使用函数名加括号 () 来调用，若函数有参数，就在括号内传入对应的参数

function a(){
    alert('a函数里的代码被执行了')
}
function b(){
    alert('b函数里的代码被执行了')
}
a()

在上述案例中，a函数被调用了

课上练习：（随机请人回答）

观察，哪个函数被调用了，程序运行的结果是什么？

function a(){
    alert('a函数里的代码被执行了')
}
function b(){
    alert('b函数里的代码被执行了')
}
a()
b()

答案：a函数和b函数都被调用了，程序是从上到下运行的，a函数先执行。

function a(){
    alert('a函数里的代码被执行了')
}
function b(){
    alert('b函数里的代码被执行了')
}
c()

答案：报错c is not defined，因为没有定义过c函数，无法调用不存在的函数

点击调用

直接在 HTML 标签里添加 onclick 属性，绑定点击事件，点击之后执行指定的函数

<button style="font-size: 50px;" onclick="a()">点击我</button>
<script>
    function a() {
        alert('a函数被执行了');
    }
</script>

思考：观察，在“带五秒就停下”案例中，需要定义几个函数？是如何进行调用的

四、任务实施（10分钟）

基础页面（发给学生）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2 style="color: red;">游戏规则：到五秒就停下！</h2>
		<h1 id="shijian" style="font-size: 50px;text-align: center;">0.0</h1>
		<button>开始</button>
		<button>停止</button>
	</body>
</html>

<script>

</script>

<style type="text/css">
	button{
		font-size: 40px;
	}
</style>

加上功能逻辑（学生自己完成）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2 style="color: red;">游戏规则：到五秒就停下！</h2>
		<h1 id="shijian" style="font-size: 50px;text-align: center;">0.0</h1>
		<button onclick="start()">开始</button>
		<button onclick="stop()">停止</button>
	</body>
</html>

<script>
	let haomiao = 0   // 计时，单位毫秒
	let timer         // 定义计时器
	// 开始按钮
	function start(){
		haomiao = 0  // 每次开始都从0秒重新计时
		// 间歇函数,每100毫秒增加100毫秒,记得找个变量保存计时器,一会还得停止计时器
		timer = setInterval(function(){
			haomiao += 100
			// 将时间挂载在页面上，将毫秒转换为秒，并且将结果固定保留一位小数
			shijian.innerHTML = (haomiao/1000).toFixed(1)
		},100)
	}
	// 停止按钮
	function stop(){
		clearInterval(timer)       // 停止计时器
		// 游戏判断
		if(haomiao == 5000){
			alert('恭喜你，游戏成功')
		}else{
			alert('很遗憾，游戏失败')
		}
	}
</script>

<style type="text/css">
	button{
		font-size: 40px;
	}
</style>