HTML JS 应用

简介: HTML JS 应用

当然可以。以下是三个HTML中使用JavaScript的应用实例:

实例一:动态更改页面元素

HTML:

html复制代码

 

<!DOCTYPE html> 

 

<html lang="en"> 

 

<head> 

 

<meta charset="UTF-8"> 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 

<title>动态更改页面元素</title> 

 

</head> 

 

<body> 

 

<h1 id="myHeader">欢迎来到我的网站</h1> 

 

<button onclick="changeHeader()">更改标题</button> 

 

 

 

<script src="script.js"></script> 

 

</body> 

 

</html>

JavaScript (script.js):

javascript复制代码

 

function changeHeader() {

 

document.getElementById('myHeader').innerHTML = '标题已更改!';

 

}

在这个例子中,当用户点击“更改标题”按钮时,会触发changeHeader函数,该函数会更改具有id="myHeader"的元素的内容。

实例二:表单验证

HTML:

html复制代码

 

<!DOCTYPE html> 

 

<html lang="en"> 

 

<head> 

 

<meta charset="UTF-8"> 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 

<title>表单验证</title> 

 

</head> 

 

<body> 

 

<form id="myForm"> 

 

<label for="name">姓名:</label> 

 

<input type="text" id="name" name="name" required> 

 

<br> 

 

<label for="email">电子邮件:</label> 

 

<input type="email" id="email" name="email" required> 

 

<br> 

 

<input type="submit" value="提交"> 

 

</form> 

 

 

 

<script src="script.js"></script> 

 

</body> 

 

</html>

JavaScript (script.js):

javascript复制代码

 

document.getElementById('myForm').addEventListener('submit', function(event) {

 

event.preventDefault(); // 阻止表单的默认提交行为

 

 

 

var name = document.getElementById('name').value;

 

var email = document.getElementById('email').value;

 

 

 

if (name === '' || email === '') {

 

alert('所有字段都是必填项!');

 

return;

 

}

 

 

 

if (!email.includes('@')) {

 

alert('请输入有效的电子邮件地址!');

 

return;

 

}

 

 

 

alert('表单提交成功!');

 

});

在这个例子中,我们使用JavaScript来验证表单的输入。如果用户没有填写所有必填字段或电子邮件地址无效,则会显示警告消息。

实例三:定时器

HTML:

html复制代码

 

<!DOCTYPE html> 

 

<html lang="en"> 

 

<head> 

 

<meta charset="UTF-8"> 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 

<title>定时器</title> 

 

</head> 

 

<body> 

 

<p id="countdown">10</p> 

 

 

 

<script src="script.js"></script> 

 

</body> 

 

</html>

JavaScript (script.js):

javascript复制代码

 

var count = 10;

 

var countdownElement = document.getElementById('countdown');

 

 

 

var countdownTimer = setInterval(function() {

 

count--;

 

countdownElement.innerHTML = count;

 

 

 

if (count === 0) {

 

clearInterval(countdownTimer);

 

alert('倒计时结束!');

 

}

 

}, 1000);

在这个例子中,我们使用JavaScript的setInterval函数来创建一个倒计时。每秒钟,倒计时数字会减1,直到达到0为止。当倒计时结束时,会显示一个警告消息。

 

目录
相关文章
|
3天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
18 0
|
9天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
20 0
|
10天前
|
开发框架 JavaScript 中间件
中间件应用Koa.js(Node.js)
【5月更文挑战第3天】我们添加了两个中间件。第一个中间件记录请求的开始时间,并在下一个中间件执行完毕后计算并打印出请求的总时间。第二个中间件与之前的示例相同,它设置响应体为 "Hello World"
25 6
中间件应用Koa.js(Node.js)
|
1天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
2天前
|
Web App开发 监控 JavaScript
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
实现JavaScript鼠标框选内容上报,需关注`Range`和`Selection`对象,处理各种元素选择情况,如文本、图片、输入框等。事件监听包括`mousedown`、`mouseup`、`selectionchange`等,用`debounce`防止频繁触发。通过`Range`获取选中内容,判断是否包含特定标签,决定返回HTML或文本。完整代码示例展示了如何实现这一功能。
8 0
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
|
2天前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
2天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
5 1
|
4天前
|
存储 缓存 前端开发
HTML应用缓存
HTML应用缓存
12 0
|
9天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
9天前
|
设计模式 JavaScript 前端开发
JS中发布/订阅模式的简单应用
JS中发布/订阅模式的简单应用