JavaScript 在网页设计中的四大精彩案例:画布时钟、自动轮播图、表单验证与可拖动元素

在网页开发中,JavaScript 发挥着至关重要的作用,为网页带来丰富的交互性和动态效果,极大地提升了用户体验。本文将通过几个具体案例展示 JavaScript 的强大魅力。

一、美丽的画布时钟

这是一个使用 JavaScript 在网页上创建美丽画布时钟的案例。通过 HTML 的canvas元素,结合 CSS 进行样式设置,再利用 JavaScript 进行图形绘制和时间更新,实现了一个实时显示的时钟效果。

首先,在 HTML 中定义了一个canvas元素,并设置了宽度和高度。在 CSS 中,对canvas进行了一些基本的样式设置,如背景颜色、边框和阴影等,使其在页面中更加突出。

在 JavaScript 部分,首先获取canvas元素并获取其上下文,以便进行图形绘制。然后,通过一系列的数学计算,将当前时间转换为角度,用于绘制时钟的指针和刻度。使用setInterval方法每秒触发一次绘制时钟的函数,保证时钟的实时性。在绘制过程中,使用不同的线条样式和颜色,绘制了时钟的外圆、中心圆、指针、刻度和数字等元素,最终呈现出一个美观的时钟效果。

以下是完整代码示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Beautiful Canvas Clock with Carousel</title><style>body {margin: 0;padding: 0;background-color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;}canvas {background-color: white;border: 10px solid #d3d3d3;box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);position: relative;}</style>
</head><body><canvas id="clockCanvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('clockCanvas');const ctx = canvas.getContext('2d');const borderWidth = 10;const adjustedWidth = canvas.width - borderWidth * 2;const adjustedHeight = canvas.height - borderWidth * 2;const outerRadius = Math.min(adjustedWidth, adjustedHeight) / 2 - 5; function drawClock() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制完整的外圆ctx.beginPath();ctx.arc(outerRadius + borderWidth, outerRadius + borderWidth, outerRadius, 0, 2 * Math.PI);ctx.strokeStyle = '#888';ctx.lineWidth = 12;ctx.stroke();// 绘制时钟中心圆ctx.beginPath();ctx.arc(outerRadius + borderWidth, outerRadius + borderWidth, 10, 0, 2 * Math.PI);ctx.fillStyle = 'goldenrod';ctx.fill();const now = new Date();const hours = now.getHours();const minutes = now.getMinutes();const seconds = now.getSeconds();const hourAngle = ((hours % 12) + minutes / 60 + seconds / 3600) * (2 * Math.PI / 12);const minuteAngle = ((minutes + seconds / 60) * (2 * Math.PI / 60));const secondAngle = (seconds * (2 * Math.PI / 60));// 绘制时针drawHand(hourAngle, outerRadius * 0.4, 12, 'navy', 'rgba(0, 0, 128, 0.5)');// 绘制分针drawHand(minuteAngle, outerRadius * 0.7, 6, 'gray', 'rgba(180, 180, 180, 0.5)');// 绘制秒针drawHand(secondAngle, outerRadius * 0.9, 2, 'crimson', 'rgba(255, 0, 0, 0.3)');// 绘制小时刻度for (let i = 0; i < 12; i++) {const angle = (i / 12) * 2 * Math.PI;ctx.beginPath();ctx.lineWidth = 8;ctx.strokeStyle = '#888';ctx.moveTo((outerRadius + borderWidth) + Math.sin(angle) * (outerRadius - 35), (outerRadius + borderWidth) - Math.cos(angle) * (outerRadius - 35));ctx.lineTo((outerRadius + borderWidth) + Math.sin(angle) * (outerRadius - 45), (outerRadius + borderWidth) - Math.cos(angle) * (outerRadius - 45));ctx.stroke();}// 绘制分钟刻度for (let i = 0; i < 60; i++) {if (i % 5!== 0) {const angle = (i / 60) * 2 * Math.PI;ctx.beginPath();ctx.lineWidth = 3;ctx.strokeStyle = 'lightgray';ctx.moveTo((outerRadius + borderWidth) + Math.sin(angle) * (outerRadius - 30), (outerRadius + borderWidth) - Math.cos(angle) * (outerRadius - 30));ctx.lineTo((outerRadius + borderWidth) + Math.sin(angle) * (outerRadius - 33), (outerRadius + borderWidth) - Math.cos(angle) * (outerRadius - 33));ctx.stroke();}}// 绘制数字ctx.font = "24px Arial";ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.fillStyle = '#888';for (let i = 1; i <= 12; i++) {const angle = (i / 12) * 2 * Math.PI;const x = (outerRadius + borderWidth) + Math.sin(angle) * (outerRadius - 65);const y = (outerRadius + borderWidth) - Math.cos(angle) * (outerRadius - 65);ctx.fillText(i.toString(), x, y);}}function drawHand(angle, length, width, color, gradientColor) {ctx.beginPath();ctx.lineWidth = width;ctx.strokeStyle = color;ctx.moveTo(outerRadius + borderWidth, outerRadius + borderWidth);ctx.lineTo((outerRadius + borderWidth) + Math.sin(angle) * length, (outerRadius + borderWidth) - Math.cos(angle) * length);ctx.stroke();// 添加渐变效果const gradient = ctx.createLinearGradient(outerRadius + borderWidth, outerRadius + borderWidth, (outerRadius + borderWidth) + Math.sin(angle) * length, (outerRadius + borderWidth) - Math.cos(angle) * length);gradient.addColorStop(0, gradientColor);gradient.addColorStop(1, color);ctx.strokeStyle = gradient;ctx.lineWidth = width + 2;ctx.beginPath();ctx.moveTo(outerRadius + borderWidth, outerRadius + borderWidth);ctx.lineTo((outerRadius + borderWidth) + Math.sin(angle) * length, (outerRadius + borderWidth) - Math.cos(angle) * length);ctx.stroke();}setInterval(drawClock, 1000);</script>
</body></html>

二、自动轮播图

这个案例展示了一个带有上一张和下一张按钮的自动轮播图。通过 HTML、CSS 和 JavaScript 的结合,实现了图片的自动切换和手动控制切换的功能。

在 HTML 中,定义了一个包含图片的容器div和两个按钮,用于切换图片。在 CSS 中,设置了容器和图片的样式,以及按钮的样式,使其在页面中呈现出美观的效果。

在 JavaScript 部分,首先通过querySelectorAll方法获取所有的图片元素,并设置一个变量来记录当前显示的图片索引。定义了三个函数,分别用于显示指定索引的图片、切换到下一张图片和切换到上一张图片。为 “下一张” 和 “上一张” 按钮添加了点击事件监听器,分别调用对应的切换图片函数。同时,使用setInterval方法定时触发切换到下一张图片的函数,实现自动轮播的效果。

以下是完整代码示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>
.carousel {position: relative;width: 500px;height: 300px;overflow: hidden;}.carousel img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease;}.carousel img.active {opacity: 1;}.controls {text-align: center;width: 500px;margin-top: 10px;}button {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;cursor: pointer;border-radius: 5px;transition: background-color 0.3s ease;}button:hover {background-color: #45a049;}</style>
</head><body><div class="carousel"><img src="https://img-blog.csdnimg.cn/166e183e84094c44bbc8ad66500cef5b.jpeg#pic_center" alt="Image 1" class="active"><img src="https://i0.hdslb.com/bfs/archive/17104a320fa20171d79f1498341047d9c6dfc5c4.jpg" alt="Image 2"><img src="https://k.sinaimg.cn/n/sinakd10116/89/w1080h609/20240523/df1f-41ed22b9c30a12e231909f7756ef4ced.png/w700d1q75cms.jpg?by=cms_fixed_width" alt="Image 3"></div><div class="controls"><button id="prevButton">上一张</button><button id="nextButton">下一张</button></div><script>const images = document.querySelectorAll('.carousel img');let currentIndex = 0;function showImage(index) {images.forEach((image, i) => {if (i === index) {image.classList.add('active');image.style.opacity = 1;} else {image.classList.remove('active');image.style.opacity = 0;}});}function nextImage() {currentIndex++;if (currentIndex >= images.length) {currentIndex = 0;}showImage(currentIndex);}function prevImage() {currentIndex--;if (currentIndex < 0) {currentIndex = images.length - 1;}showImage(currentIndex);}document.getElementById('nextButton').addEventListener('click', nextImage);document.getElementById('prevButton').addEventListener('click', prevImage);setInterval(nextImage, 3000);</script>
</body></html>

三、表单验证

这个案例实现了一个简单的表单验证功能。通过 JavaScript 对用户在表单中输入的数据进行检查,确保数据的有效性。

在 HTML 中,定义了一个包含用户名、邮箱和密码输入框以及提交按钮的表单。在 CSS 中,设置了输入框在错误状态下的样式,以便在用户输入错误时进行提示。

在 JavaScript 部分,首先通过querySelector方法获取表单元素以及各个输入框元素。为表单添加提交事件监听器,在提交事件处理函数中,检查各个输入框的值是否为空或是否符合特定格式(如邮箱格式验证)。如果输入不符合要求,为输入框添加错误样式,提示用户输入有误。如果输入有效,则可以进行提交表单或其他操作。

以下是完整代码示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>input.error {border: 1px solid red;}</style>
</head><body><form><input type="text" name="username" placeholder="用户名"><input type="email" name="email" placeholder="邮箱"><input type="password" name="password" placeholder="密码"><input type="submit" value="提交"></form><script>const form = document.querySelector('form');const usernameInput = document.querySelector('input[name="username"]');const emailInput = document.querySelector('input[name="email"]');const passwordInput = document.querySelector('input[name="password"]');form.addEventListener('submit', function(event) {event.preventDefault();let isValid = true;if (usernameInput.value === '') {isValid = false;usernameInput.classList.add('error');} else {usernameInput.classList.remove('error');}if (emailInput.value === '' ||!isValidEmail(emailInput.value)) {isValid = false;emailInput.classList.add('error');} else {emailInput.classList.remove('error');}if (passwordInput.value === '') {isValid = false;passwordInput.classList.add('error');} else {passwordInput.classList.remove('error');}if (isValid) {// 表单数据有效,可以提交alert('表单提交成功!');}});function isValidEmail(email) {const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;return emailRegex.test(email);}</script>
</body></html>

四、可拖动的小 div 在大 div 内

这个案例实现了一个可在大div内拖动的小div。通过 JavaScript 监听鼠标事件,实现小div的拖动效果,并确保小div始终在大div的范围内。

在 HTML 中,定义了一个大div和一个小div。在 CSS 中,设置了大div和小div的样式,使其在页面中呈现出明显的区别。

在 JavaScript 部分,首先获取大div和小div元素。为小div添加鼠标按下事件监听器,在鼠标按下时,记录鼠标位置与小div位置的差值。为文档添加鼠标移动事件监听器,当鼠标移动且处于拖动状态时,根据鼠标位置和记录的差值计算小div的新位置,并进行边界限制,确保小div始终在大div内部。为文档添加鼠标松开事件监听器,停止拖动状态。

以下是完整代码示例:

<!DOCTYPE html>
<html lang="en"><head><style>
.big-div {width: 300px;height: 300px;border: 2px solid black;position: relative;}.small-div {width: 50px;height: 50px;background-color: blue;position: absolute;}</style>
</head><body><div class="big-div"><div class="small-div"></div></div><script>const smallDiv = document.querySelector('.small-div');const bigDiv = document.querySelector('.big-div');let isDragging = false;let offsetX, offsetY;smallDiv.addEventListener('mousedown', function(event) {isDragging = true;offsetX = event.clientX - smallDiv.offsetLeft;offsetY = event.clientY - smallDiv.offsetTop;});document.addEventListener('mousemove', function(event) {if (isDragging) {let newLeft = event.clientX - offsetX;let newTop = event.clientY - offsetY;// 限制在大 div 内if (newLeft < 0) newLeft = 0;if (newTop < 0) newTop = 0;if (newLeft > bigDiv.offsetWidth - smallDiv.offsetWidth) newLeft = bigDiv.offsetWidth - smallDiv.offsetWidth;if (newTop > bigDiv.offsetHeight - smallDiv.offsetHeight) newTop = bigDiv.offsetHeight - smallDiv.offsetHeight;smallDiv.style.left = newLeft + 'px';smallDiv.style.top = newTop + 'px';}});document.addEventListener('mouseup', function() {isDragging = false;});</script>
</body></html>

结论

本文通过四个案例展示了 JavaScript 在网页设计中的强大作用。包括美丽的画布时钟、自动轮播图、表单验证以及可拖动的小 div。这些案例体现了 JavaScript 在图形绘制、元素操作、事件处理和数据验证等方面的能力,极大地提升了网页的交互性和用户体验,凸显了 JavaScript 在网页设计中的不可或缺性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56419.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch Note

cat函数: cat函数不会增加维度&#xff0c;默认按照dim0连接张量 stack函数: stack函数会增加一个维度 nn.Linear的默认输入: torch中默认输入一定要为tensor&#xff0c;并且默认是tensor.float32&#xff0c;此外device如果没有model.to(device)放到gpu上面默认会在cpu上运…

RabbitMQ系列学习笔记(十)--通配符模式

文章目录 一、通配符模式原理二、通配符模式实战1、消费者代码2、生产者代码3、查看运行结果 本文参考&#xff1a; 尚硅谷RabbitMQ教程丨快速掌握MQ消息中间件rabbitmq RabbitMQ 详解 Centos7环境安装Erlang、RabbitMQ详细过程(配图) 一、通配符模式原理 通配符模式&#xff…

2024 睿抗机器人开发者大赛(RAICOM)-【网络安全】CTF 部分WP

文章目录 一、前言二、MICS你是黑客么循环的压缩包Goodtime 三、WEBpy 四、Crypto变异凯撒RSAcrypto3 一、前言 WP不完整&#xff0c;仅供参考&#xff01; 除WEB&#xff0c;RE&#xff0c;PWN外&#xff0c;其余附件均已打包完毕 也是一个对MISC比较友好的一个比赛~ 123网…

写了一个SpringBoot的后端管理系统(仅后端)pine-manage-system

文章目录 前言正文&#x1f680; 技术栈&#x1f6e0;️ 功能模块&#x1f4c1; 项目结构&#x1f308; 接口文档&#x1f680; 项目启动 附录项目功能代码示例1、数据库拦截器-打印sql执行时间2、数据记录变更拦截器3、用户角色数据权限拦截器4、实体转换器接口5、触发器模版6…

自动驾驶合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/12304421 #NeRF与自动驾驶 神经辐射场&#xff08;Neural Radiance Fields&#xff09;自2020年被提出以来&#xff0c;相关论文数量呈指数增长&#xff0c;不但成为了三维重建的重要分支方向&#xff0c;也逐渐作为自动驾驶…

C++学习笔记----9、发现继承的技巧(五)---- 多重继承(1)

我们前面提到过&#xff0c;多重继承常被认为是面向对象编程中复杂且没有必要的部分。这就仁者见仁&#xff0c;智者见智了&#xff0c;留给大家去评判。本节解释c中的多重继承。 1、多个类继承 从语法角度来说&#xff0c;定义一个有多个父类的类是很简单的。需要做的就是当声…

DASCTF 2024金秋十月赛RE题wp

目录 RE1&#xff1a;ezRERE2&#xff1a;ezelfRE3&#xff1a;ezAndroid 3题RE&#xff0c;差一点就AK了&#xff0c;可能好久没打比赛了&#xff0c;技能有所下降&#xff0c;还是需要经常摸一摸工具。 RE1&#xff1a;ezRE 执行的时候dump出来&#xff0c;然后静态分析 发…

Java项目-基于springboot框架的游戏分享系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

[ACTF2020] 新生赛]Exec1

目录 0x01命令执行 [ACTF2020 新生赛]Exec1 1、解法1 2、解法2 3、总结 3.1php命令注入函数 3.2java命令注入函数 3.3常见管道符 0x02SQL注入 [极客大挑战 2019]EasySQL1 0x01命令执行 [ACTF2020 新生赛]Exec1 1、解法1 ping本地&#xff0c;有回显&#xff0c;TTL…

红队-安全见闻篇(上)

声明 学习视频来自B站UP主 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一.编程与开发 1.后端语言学习 C语⾔&#xff1a;⼀种通⽤的…

Pytest-Bdd-Playwright 系列教程(1):从零开始教你写自动化测试框架「喂饭教程」

Pytest-Bdd-Playwright 系列教程&#xff08;1&#xff09;&#xff1a;从零开始教你写自动化测试框架「喂饭教程」 前言一、项目结构二、安装依赖三、BDD特性文件四、页面对象五、步骤定义六、测试脚本七、Pytest配置八、运行测试 前言 最近收到一些小伙伴在后台的留言&#x…

生成式AI时代的内容安全与系统构建:合合信息文档图像篡改检测创新方案

目录 一、生成式AI时代的内容安全与图像识别1.图像内容安全的重要性2.伪造文档与证件检测的应用场景3.人脸伪造检测技术 二、系统构建加速与文档解析1.TextIn文档解析平台2.TextIn文档解析输出的示例 三、合合信息的行业影响力总结 一、生成式AI时代的内容安全与图像识别 随着…

python-----函数详解(一)

一、概念及作用&#xff1a; 概念&#xff1a;由若干条语句组成语句块&#xff0c;其中包括函数名称、参数列表&#xff0c;它是组织代码的最小单元&#xff0c;完成一定的功能 作用&#xff1a;把一个代码封装成一个函数&#xff0c;一般按功能组织一段代码 目的就是为了重…

autMan奥特曼机器人-安装或更新golang依赖

autMan2.3.4及以上需要更新中间件或安装golang依赖&#xff0c;参照下列步骤&#xff1a; 一、直装版本 ssh下进入autMan文件夹下plugin/scripts下面输入以下指令&#xff1a; go get -u github.com/hdbjlizhe/middleware二、docker版本 从后台进入web终端&#xff0c;依次输入…

Ubuntu 上安装 Redmine 5.1 指南

文章目录 官网安装文档&#xff1a;命令步骤相关介绍GemRubyRailsBundler 安装 Redmine更新系统包列表和软件包&#xff1a;安装必要的依赖&#xff1a;安装 Ruby&#xff1a;安装 bundler下载 Redmine 源代码&#xff1a;安装 MySQL配置 Redmine 的数据库配置文件&#xff1a;…

Node.js:深入探秘 CommonJS 模块化的奥秘

在Node.js出现之前&#xff0c;服务端JavaScript基本上处于一片荒芜的境况&#xff0c;而当时也没有出现ES6的模块化规范。因此&#xff0c;Node.js采用了当时比较先进的一种模块化规范来实现服务端JavaScript的模块化机制&#xff0c;它就是CommonJS&#xff0c;有时也简称为C…

2024ideaUI切换和svn与git的切换,svn的安装和配置,idea集成svn ,2024-10-18日

2024-10-18日 2024的UI实在很不舒服&#xff0c;隐藏了很多按键&#xff1b; 第一步&#xff1a; 视图 -》 外观 -》 工具栏选出来&#xff1b; 结果出来&#xff1a; 运行的按键和设置的按钮 第二步 点击设置的按钮&#xff0c;选择最后一个&#xff0c;重启就行 结果 舒服&…

论文阅读(二十四):SA-Net: Shuffle Attention for Deep Convolutional Neural Networks

文章目录 Abstract1.Introduction2.Shuffle Attention3.Code 论文&#xff1a;SA-Net&#xff1a;Shuffle Attention for Deep Convolutional Neural Networks(SA-Net&#xff1a;置换注意力机制)   论文链接&#xff1a;SA-Net&#xff1a;Shuffle Attention for Deep Convo…

九州未来亓绚亮相丽台Solution Day 2024,共建AI赋能教育新时代

在数字化浪潮席卷全球的当下&#xff0c;生成式人工智能正迅速渗透至数字世界的每一个角落&#xff0c;而AI技术的物理化应用也正成为新的趋势。10月22日&#xff0c;丽台解决方案日Solution Day 2024&#xff1a;物理AI推动行业数字变革在上海绿地外滩中心顺利举行。 大会聚焦…

报表工具怎么选?山海鲸VS帆软,哪个更适合你?

概述 在国产报表软件市场中&#xff0c;山海鲸报表和帆软这两款工具都占有一席之地&#xff0c;许多企业在选择报表工具时常常在它们之间徘徊。然而&#xff0c;随着企业对数据分析需求的不断增长和复杂化&#xff0c;如何选取一款高效、易用且性价比高的报表工具&#xff0c;…