学习HTML 第五节.简单交互 加个按钮

学习HTML 第五节.简单交互

也许你和我一样,对页面排版的兴趣小于网页交互,那么我们就先略过一些章节,直接先学一下简单交互。

前面点击图片打开链接的网址,已经是最简单的交互方式了,复杂的方式则需要用到JavaScript编程。

听起来好深奥,能不能学会啊?反正开始是很简单的,我已经会了。

谈到编程学习,第一步当然是老套的在屏幕上显示一行“Hello World”啦。

还是以原来那个HTML文件做底,加上红色的一段:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我要学HTML---简单交互</title>
</head>

<body style="background-color:green;">
<h1 style="text-align: center;color:red">整体背景为绿色
</h1>

<h2 style="background-color:red;">显示一行文字;</h2>
<script>
document.write("Hello! Your fuddy-duddy World!  你好!这个老套的世界!")
</script>

</body>
</html>

学习HTML 第五节.简单交互 加个按钮

显示出来就这样,好象没什么玄妙嘛,跟之前学的有什么不一样?

别急,内涵不一样了。

<script>标签表示后面是JavaScript语句了。

document.write("...")文本书写?语法反正跟之前学的不一样了,晕,又是新概念啊~~~

大概意思是在屏幕上显示如下文字吧,洋人的思维从来没正常过,虽然就是显示一句“Hello world!”,从来都是说打印啊、书写啊什么的,好好说显示不行吗?就象我们要学的JavaScript,只是作者喜欢Java,实际跟Java没什么关系。好吧,无可奈何花落去,似曾相识接着来。

显示一行文字好象没体现出什么交互啊?这么多问题,没关系,慢慢来。

我们下面作个按钮试试,这个有点交互的意思了。

把<body>的内容改成下面一段:

<h1 style="text-align: center;color:red">
我的第一个 JavaScript 按钮
</h1>

<p id="demo">请点按钮
</p>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML='“Hello! Your fuddy-duddy world! 你好!你这个老套的世界!”点一下按钮就显示这一句。'
}
</script>
<noscript>这个程序需要JavaScript,你的浏览器不支持!</noscript>
<button type="button" onclick="myFunction()">请点一下我</button>

打开HTML后显示如下,你看,有个按钮了。

学习HTML 第五节.简单交互 加个按钮

点下按钮后,显示变成这样:

学习HTML 第五节.简单交互 加个按钮

请点按钮那句话变成了“老套的世界”哈!

交互过程挺简单,只是点一下按钮,但代码好象挺复杂!

1.首先在<p>标签中,给“请点按钮”那一段定义一个id,叫:“demo”;

2.然后在<script>中定义一个功能“myFunction()”,这个功能就是将指定id那段,替换显示为最后“老套的世界”那句话。

3.最后在<button>中用onclick属性定义按钮的功能就是调用已定义的“myFunction()”;

4.当然还要给按钮定义两个基本属性:一个是type按钮类型,另一个是按钮显示的文字“请点一下我”。

在按下按钮之前,显示的是

“请点按钮”这句话,和“请点一下我”按钮

按下按钮之后,“请点按钮”这句话被替换为“老套的世界”那句,但按钮的显示没变。

上一篇:Mysql(一)安装


下一篇:RedisCluster的rename机制失败报错,解决又是数据倾斜问题