当前位置： 首页 > news >正文

制作一个简单的html网页

news 2026/5/23 2:26:12

1.  特效按钮
2     可以独立使用的一个页面
3   底部小时钟

 

<!DOCTYPE html>
<html>
<head><title>Simple Webpage</title><style>/* 禁止鼠标右键 */body {-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none;   /* Safari */-khtml-user-select: none;   /* Konqueror HTML */-moz-user-select: none;   /* Old versions of Firefox */-ms-user-select: none;   /* Internet Explorer/Edge */user-select: none;   /* Non-prefixed version, currently supported by Chrome and Opera */}/* 特效按钮样式 */.button {width: 100px;height: 50px;background-color: red;color: white;text-align: center;line-height: 50px;cursor: pointer;}/* 底部小时钟样式 */#clock {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);font-size: 20px;}</style>
</head>
<body><div class="button">特效按钮</div><div id="clock"></div><script>// 获取访问者的操作系统和ip地址var os = window.navigator.platform;var ip = "";fetch("https://api.ipify.org/?format=json").then(function(response) {return response.json();}).then(function(data) {ip = data.ip;});// 页面加载完成后执行以下代码window.onload = function() {// 添加点击事件到特效按钮document.querySelector(".button").addEventListener("click", function() {// 在这里写特效按钮的代码});// 添加小时钟功能setInterval(function() {var date = new Date();var hours = date.getHours().toString().padStart(2, "0");var minutes = date.getMinutes().toString().padStart(2, "0");var seconds = date.getSeconds().toString().padStart(2, "0");document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;}, 1000);};</script>
</body>
</html>

相关文章：

制作一个简单的html网页

1. 特效按钮 2 可以独立使用的一个页面 3 底部小时钟 <!DOCTYPE html> <html> <head><title>Simple Webpage</title><style>/* 禁止鼠标右键 */body {-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; …...

编程日记 2024/2/21 2:50:52

js filter,every,includes 过滤数组

背景&#xff1a; 页面&#xff1a;在项目中遇到的&#xff0c;前端页面显示为&#xff0c;顶部是下拉搜索条件,下面是一个表格&#xff1b; 数据&#xff1a;接口请求一次性拿到所有&#xff1a;搜索条件里的下拉选项和表格中的数据&#xff1b; 现状&#xff1a;需要前端在搜…...

编程日记 2024/2/21 2:47:49

jenkins自动化部署

Jenkins安装 安装前提条件 yum install java-1.8.0-openjdk* git maven -y ​ 1.下载jenkins wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/jenkins-2.346-1.1.noarch.rpm --no-check-certificate ​ jenkins的安装路径&#xff1a; /var/lib/jenkins/ ​ …...

编程日记 2024/2/21 2:42:43

【JavaScript】分支语句

目录 一、if语句 二、三元运算符 三、switch语句 JS中分支语句可以分为三种&#xff0c;分别是if语句、三元运算符、switch语句。 一、if语句 let num 10 if (num > 20) {console.log("大于20"); } else if (num < 20) {console.log("小于20");…...

编程日记 2024/2/21 2:40:41

【开源】SpringBoot框架开发农家乐订餐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核心代码4.1 查询菜品类型4.2 查询菜品4.3 加购菜品4.4 新增菜品收藏4.5 新增菜品留言 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的农家乐订餐系统&#xff0c…...

编程日记 2024/2/21 2:39:40

OSQP文档学习

OSQP官方文档 1 QSQP简介 OSQP求解形式为的凸二次规划&#xff1a; x ∈ R n x∈R^n x∈Rn&#xff1a;优化变量 P ∈ S n P∈S^n_ P∈Sn​&#xff1a;半正定矩阵 特征 &#xff08;1&#xff09;高效&#xff1a;使用了一种自定义的基于ADMM的一阶方法&#xff0c;只需…...

编程日记 2024/2/21 2:37:39

ONLYOFFICE 8.0：引领数字化办公新纪元

目录 前言 软件安装 软件启动 软件新版本特性 个人评价 总结 前言 在当今快节奏的数字化世界中&#xff0c;高效的办公软件已成为企业竞争力的关键因素。ONLYOFFICE&#xff0c;作为全球领先的办公解决方案提供商&#xff0c;始终致力于通过技术创新来优化用户体验。如今…...

编程日记 2024/2/21 2:35:36

「Linux」基础命令

目录结构 Linux只有1个顶级目录&#xff0c;称为“根目录”路径之间的层级关系&#xff0c;使用/来表示&#xff0c;例如&#xff1a;/usr/local/hello.txt 开头的/表示根目录后面的/表示层级关系 命令入门 命令的通用格式&#xff1a;command [ -options ] [ parameter] c…...

编程日记 2024/2/21 2:31:32

三防平板丨平板终端丨加固平板丨户外勘测应用

随着科技的不断发展&#xff0c;现代勘测业也在不断升级。相较于传统的勘测设备&#xff0c;三防平板在户外勘测中有着广泛的应用。那么&#xff0c;三防平板在户外勘测中究竟有哪些优势呢&#xff1f; 首先&#xff0c;三防平板具备极强的防水、防尘、防摔能力。在野外勘测中&…...

编程日记 2024/2/21 2:28:30

npm ERR! code CERT_HAS_EXPIRED：解决证书过期问题

转载&#xff1a;npm ERR! code CERT_HAS_EXPIRED&#xff1a;解决证书过期问题_npm err! code cert_has_expired npm err! errno cert-CSDN博客 npm config set registry http://registry.cnpmjs.org npm config set registry http://registry.npm.taobao.org...

编程日记 2024/2/21 2:25:27

npm报错之package-lock.json found. 问题和淘宝镜像源过期问题

1、package-lock.json found. 问题的解决 在执行yarn add react-transition-group -S 安装react-transition-group时出现package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in orde…...

编程日记 2024/2/21 2:21:24

大模型提示学习、Prompting微调知识

为什么需要提示学习&#xff1f; 提示学习是一种在自然语言处理任务中引入人类编写的提示或示例来辅助模型生成更准确和有意义的输出的技术。以下是一些使用提示学习的原因&#xff1a; 解决模糊性&#xff1a;在某些任务中&#xff0c;输入可能存在歧义或模糊性&#xff0c;通…...

编程日记 2024/2/21 2:19:22

vue 导出，下载错误提示、blob与json数据转换

一、成功/失败 - 页面展示 失败 成功 二、成功/失败 - 接口请求/响应展示成功 2. 失败 三、解决 // 导出列表exportReceivedExcel() {if (this.tableCheckedValue) {this.form.ids this.tableCheckedValue.map(v > {return v.id || null})}this.loadingReceivedExcel …...

编程日记 2024/2/21 2:17:21

代码随想录算法训练营|二叉树总结

二叉树的定义&#xff1a; struct TreeNode {int val;TreeNode* left;TreeNode* right;TreeNode():val(0),left(nullptr),right(nullptr){}TreeNode(int val):val(val),left(nullptr),right(nullptr){}TreeNode(int val,TreeNode* left,TreeNode* right):val(val),left(left),…...

编程日记 2024/2/21 2:16:19

rtt的io设备框架面向对象学习-uart设备

目录 1.uart设备基类2.uart设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 设备io管理层 4.总结5.使用 1.uart设备基类 此层处于设备驱动框架层。也是抽象类。 在/ components / drivers / include / drivers 下的serial.h定义了如下uart设备基类 struc…...

编程日记 2024/2/21 2:15:18

PyCharm - Script parameters (脚本参数)

PyCharm - Script parameters [脚本参数] References Run -> Edit Configurations… -> Run/Debug Configurations -> Configuration -> Script parameters 命令行&#xff1a; python display_yolo_log.py ./person_training_log/person_train_log_DIMM40_stdout…...

编程日记 2024/2/21 2:14:16

Security6.2 中的SpEL 表达式应用（权限注解使用）

最近学习若依框架&#xff0c;里面的权限注解涉及到了SpEL表达式 PreAuthorize("ss.hasPermi(system:user:list)")&#xff0c;若依项目中用的是自己写的方法进行权限处理&#xff0c; 也可以只用security 来实现权限逻辑代码&#xff0c;下面写如何用security 实现。…...

编程日记 2024/2/21 2:13:16

软考笔记--信息系统开发方法（下）

信息系统是一个极其复杂的人机交互系统&#xff0c;它不仅包含计算机技术&#xff0c;通信技术和网络规划以及其他的工程技术&#xff0c;而且&#xff0c;它还是一个复杂的管理系统&#xff0c;需要管理理论和方法的支持&#xff0c;因此&#xff0c;与其他工程项目相比&#…...

编程日记 2024/2/21 2:12:14

从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时

新年首发&#xff0c; 去年的问题&#xff0c;今年解决~ 问题 & 排查 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task :app:processCommonReleaseManifest. > org.xml.sax.SAXParseException; lineNumber: 1; columnNu…...

编程日记 2024/2/21 2:06:09

spring boot 使用AOP实现是否已登录检测

前后端分离的开发中&#xff0c;用户http请求应用服务的接口时, 如果要求检测该用户是否已登录。可以实现的方法有多种&#xff0c; 本示例是通过aop 的方式实现&#xff0c;简单有效。 约定&#xff1a;前端http的post 请求 export async function request(url,data) {const …...

编程日记 2024/2/21 2:04:07

山东甲亢专治医院哪个好

近年来&#xff0c;甲状腺疾病发病率呈上升趋势&#xff0c;甲亢因其症状多样、影响广泛&#xff0c;成为困扰许多人的健康问题。面对这一状况&#xff0c;如何在山东地区选择一家专业、可靠的医院进行诊治&#xff0c;是众多患者及家属关心的核心问题。专业的诊疗不仅关乎症状…...

编程新知 2026/5/23 1:26:29

Windows右键菜单终极优化指南：如何用ContextMenuManager让右键菜单秒开如飞

Windows右键菜单终极优化指南&#xff1a;如何用ContextMenuManager让右键菜单秒开如飞 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾经对着电脑屏幕等…...

编程新知 2026/5/23 0:07:28

app应用接入广告的完整流程和方法：从零搭建可持续变现体系

随着移动互联网进入存量竞争阶段&#xff0c;用户流量增长趋于饱和&#xff0c;单纯依靠用户新增实现产品增值的模式已然失效。对于绝大多数免费工具、社交、资讯、游戏类 APP 而言&#xff0c;合规、稳定、可持续的广告变现&#xff0c;已经成为补齐产品商业闭环、维持产品长期…...

编程新知 2026/5/23 0:01:24

Taotoken的TokenPlan套餐如何为个人开发者节省成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的TokenPlan套餐如何为个人开发者节省成本 对于个人开发者或小型工作室而言&#xff0c;在项目开发中集成大模型API是提升…...

编程新知 2026/5/22 23:24:17

观察Taotoken在多模型聚合调用下的稳定性与路由表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察Taotoken在多模型聚合调用下的稳定性与路由表现 1. 引言 在构建依赖大模型能力的应用时&#xff0c;服务的连续性与稳定性是开…...

编程新知 2026/5/22 23:05:25

逻辑回归实战：从原理、数值稳定到生产级代码实现

1. 什么是逻辑回归&#xff1a;从医生诊断到快递分拣的真实场景逻辑回归不是教科书里那个干巴巴的“S型曲线”&#xff0c;它是我过去八年带团队做工业质检项目时&#xff0c;每天早上打开监控大屏第一眼就要确认的模型——当产线摄像头拍下第372个电路板&#xff0c;系统在0.8…...

编程新知 2026/5/22 22:56:35

机器学习驱动的中微子-核散射截面建模：从数据学习到振荡分析

1. 项目概述与核心价值 中微子物理正步入一个前所未有的“精密测量”时代。像DUNE&#xff08;深地下中微子实验&#xff09;这样的下一代长基线实验&#xff0c;目标是将中微子混合参数的测量精度推至百分之一量级。然而&#xff0c;一个长期存在的“拦路虎”限制了这一目标的…...

编程新知 2026/5/22 22:54:29

ARM Cortex-M4中断优先级与嵌套配置实战指南

1. 项目概述&#xff1a;为什么中断优先级和嵌套是嵌入式开发的“命门”如果你正在用ARM Cortex-M4做项目&#xff0c;无论是做电机控制、物联网设备还是消费电子&#xff0c;中断系统绝对是绕不开的核心。很多新手工程师&#xff0c;甚至一些有经验的开发者&#xff0c;常常在…...

编程新知 2026/5/22 21:08:59

拒绝玩具CRUD：用 5 款全栈离线“仓储管理”微系统精通前后端解耦（附专家级级联 Prompt）

各位全栈同仁、大前端极客以及正在突破技术瓶颈的开发者们&#xff0c;大家好。作为一名每天和分布式架构、数据库事务以及前端复杂状态流打交道的工程师&#xff0c;今天想和大家聊聊全栈工程落地中的“咬合力”。在很多技术社区里&#xff0c;大家往往能看到各种速成的单表 C…...

编程新知 2026/5/22 20:53:54

交互形态的深层迭代：从文本到具象化表达

行业在探索智能交互形态时&#xff0c;会发现一个共性现象&#xff1a;不少智能体的逻辑与生成能力已经成熟&#xff0c;但对外交互始终局限在文本对话框。 过去一年&#xff0c;行业主流做法高度趋同&#xff1a;大模型对接知识库、工具调用、流程编排&#xff0c;最终收敛为文…...

编程新知 2026/5/22 19:50:17