轻松学习JavaScript四：JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用

最新推荐文章于 2023-10-15 23:00:40 发布
最新推荐文章于 2023-10-15 23:00:40 发布
阅读量1w 收藏 15
点赞数 3
分类专栏： JavaScript Web前端HTML+CSS+JS初级入门 文章标签： javascript web前端开发 dreamweaver html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erlian1992/article/details/49911787
版权

       我们开始解释JS在HTML中作用。对于因特网和视窗操作系统，JavaScript都意味着未来。

       (1)JavaScript：写入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=gb2312" />
<title>JS作用</title>
</head>

<body>
<p>
JavaScript 能够直接写入HTML输出流中：
</p>

<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
        运行结果为：


        提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

        (2)JavaScript：对事件作出反应

        实例代码：

<!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=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>

<button type="button" οnclick="alert('Welcome!')">点击这里</button>
</body>
</html>

       点击按钮之后：


        alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。onclick 事件只是您即将在本教程中学到的

众多事件之一。

       (3)JavaScript：改变HTML内容

       使用JavaScript来处理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=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript能改变HTML元素的内容。
</p>

<script type="text/javascript">
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>

       点击之前：


       点击之后：


       您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。DOM（文档对象模

型）是用以访问HTML元素的正式 W3C 标准。

       (4)JavaScript：改变HTML图像

       本例会动态地改变HTML<image>的来源(src)：

       The Light bulb

       点击灯泡就可以打开或关闭这盏灯

       实例代码：

<!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=gb2312" />
<title>JS作用</title>
</head>

<body>
<script type="text/javascript">
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
  }
else
  {
  element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" οnclick="changeImage()" 

src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>

       未点击之前：


       点击之后：


       再次点击之后：


       JavaScript能够改变任意HTML元素的大多数属性，而不仅仅是图片。这是最炫酷的一个实例，也是经典的样

例！！

       (5)JavaScript：改变HTML样式

       改变HTML元素的样式，属于改变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=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变HTML元素的样式。
</p>

<script type="text/javascript">
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式
}
</script>

<button type="button" οnclick="myFunction()">点击这里</button>

</body>
</html>

       运行结果为：


       点击按钮后：


       (7)JavaScript：验证输入

       JavaScript 常用于验证用户的输入。

       实例代码：

<!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=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script type="text/javascript">
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
	{
	alert("Not Numeric");
	}
}
</script>

<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>

       输入lian之后的结果为：


       (7)操作HTML元素

       如需从JavaScript访问某个HTML元素，您可以使用 document.getElementById(id) 方法。

       请使用 "id" 属性来标识 HTML 元素：

       例子：通过指定的 id 来访问 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=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>
        运行的结果为：


       JavaScript由web浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容

（innerHTML）替换为 "My First JavaScript"。

        (8)警告

        请使用 document.write() 仅仅向文档输出写内容。

        如果在文档已完成加载后执行 document.write，整个 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=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button οnclick="myFunction()">点击这里</button>

<script type="text/javascript">
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>

        点击按钮之后：
life is wonderful
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
javascript实现点亮灯泡特效示例
10-16
主要介绍了javascript实现点亮灯泡特效示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS小练习---开关灯泡
gabby____的博客
08-10 1405
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;script&gt; function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/i/eg_bulb...
JS中用一个button按钮实现开关灯效果
fightingfjj的博客
11-15 5166
JS中用一个button按钮实现开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
【Java 进阶篇】JavaScript电灯开关案例：从原理到实现
最新发布
繁依Fanyi的博客
10-15 1242
在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。HTML结构：创建HTML元素，包括按钮和灯。CSS样式：定义按钮、灯和页面的样式。JavaScript交互：通过JavaScript来实现按钮与灯的交互。在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。
前端小练习JS实现网页开灯和关灯
weixin_51983027的博客
11-30 1228
思路：首先是获取开关灯按钮元素和body元素，然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色，按钮的背景色变为白色，按钮由关灯字样变为开灯字样，然后再点击按钮，又由开灯变为关灯，页面背景色变为白色。基于javascript，css，html实现的一个简单好用的关灯开灯小案例
简单的JavaScript实现开灯关灯效果 ↑_↑
NCITS的专栏
05-05 9189
近期做网页设计作业，感觉各种视频网站上的关灯效果很人性化，所以简易的用JavaScript写了一个   附上全部代码          无标题文档 #choose{  margin:200px 200px; } .daytime{  background: #0D0D0D; } .nigth{  background: #FFF; }
JavaScript实现的开关灯泡点击切换特效示例
10-16
主要介绍了JavaScript实现的开关灯泡点击切换特效,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JS.rar_javascript_js制作网页_js网页特效
09-20
用javascript做的网页特效，比较炫，喜欢网页制作的朋友可以参考
javascript+html灯泡开关 2种方式
amz_java的博客
03-21 1184
灯泡开关
帮我写一个js的点击开关按钮切换灯泡开关状态
weixin_42596246的博客
02-18 323
<p>我可以给你一个简单的示例，可以帮你实现点击开关按钮切换灯泡开关状态的功能：<script> var lightOn = false;function switchLight(){ if (lightOn == false) { lightOn = true; document.getElementById("lightBulb").src = "o...
HTML5实现点击触发灯泡开关
m0_52239519的博客
11-14 2479
效果图 提示：以下是本篇文章正文内容，下面案例可供参考 代码 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
Nearth===>WEB前端--第6课/JQuery/网页实现开关灯（小案例）
ly1716的博客
10-24 478
目的：点击按钮设置body的背景颜色，实现网页开关灯的效果 DOM的方式操作代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script > window.onload=...
JS实现灯泡亮熄特效
weixin_45746054的博客
10-14 484
** JS实现灯泡亮熄特效 首先打开HBUilder软件，创建HTML文件 输入代码 <body> <img src="1.png.jpg" width="160" height="120" alt="" onclick="toggle()" id="bulb"> <div id="timer"> </div>...
点击开关按钮，js实现电灯开关效果
qq_53983648的博客
11-22 5813
js实现开关灯效果
Javascript 知识总结
RAINY223的博客
09-14 363
Javascript 知识总结
JavaScript中开关灯案例展示
m0_71345904的博客
06-27 1685
今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。代码展示，需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置； 在html中添加一个按钮标签（button）。因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源body元素较特殊，直接用document.body就可以获取到获取完，给按钮添加点击事件属性（onclick）重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断
JavaScript - 超简单实现页面的“关灯”和“开灯”
weixin_54138158的博客
04-13 1659
文章目录前言一、实现效果二、代码示例 前言 题目描述：通过Javascript点击按钮实现页面背景颜色的改变 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现效果 二、代码示例 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit
点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡 js
05-24
你可以使用以下 JavaScript 代码来实现： HTML 代码： ``` ()">点亮 ()">熄灭 ``` JavaScript 代码： ``` function light() { var bulb = document.getElementById("bulb"); bulb.src = "on.png"; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值