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

【前端】一个好看的前端页面

news 2026/2/9 16:59:43

序言

突发奇想，看到这个特效还不错，就加工了一下，如果也能帮到你，很开心

先上效果图

部分代码讲解

前端生成uuid

function getUUID(len, radix) {var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')var uuid = []var iradix = radix || chars.lengthif (len) {for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]} else {var ruuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'uuid[14] = '4'for (i = 0; i < 36; i++) {if (!uuid[i]) {r = 0 | Math.random() * 16uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]}}}return uuid.join('')
}

修改input 原生date icon

   input[type=date]::-webkit-calendar-picker-indicator {/*border: 1px solid #0c1622;*//*border-radius: 2px;*//*box-shadow: inset 0 1px #0c1622, 0 1px #0c1622;*//*background-color: #0c1622;*/background-image: url("dateicon2.svg");/*background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);*//*color: #0c1622;*/}

icon

可以去阿里矢量库下载想要的图标

地址：iconfont-阿里巴巴矢量图标库

我使用的是下面这个，但是颜色是白色，因为整个背景图是深色，图标需要浅色。

其他修改

1. 去掉 date 中上下小三角，但是保留 input 类型为 number 的小三角

     input[type=date]::-webkit-inner-spin-button { visibility: hidden; }

2. 改变日期（文字）的背景色，或添加背景图

 input[type=date]::-webkit-datetime-edit { padding: 1px; background: url(../selection.gif); }

3. 改变日期（文字）的背景色，或添加背景图

   input[type=date]::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }

4. 改变年月日间距和连接符颜色

    input[type=date]::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; }

5. 改变年的颜色

 input[type=date]::-webkit-datetime-edit-year-field { color: purple; }

6. 改变月的颜色

input[type=date]::-webkit-datetime-edit-month-field { color: blue; }

7. 改变日的颜色

 input[type=date]::-webkit-datetime-edit-day-field { color: green; }

8. 改变选择年月日按钮

  input[type=date]::-webkit-calendar-picker-indicator {border: 1px solid #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;background-color: #eee;background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);color: #666;}

完整代码

<!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, initial-scale=1.0"><!-- 引入jQuery库文件 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!-- 引入Layer弹窗插件的css文件 --><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css"><!-- 引入Layer弹窗插件的js文件 --><script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script><title>UUID</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}input,button {background: transparent;border: 0;outline: none;}body {height: 100vh;background: linear-gradient(#141e30, #243b55);display: flex;justify-content: center;align-items: center;font-size: 16px;color: #03e9f4;}.loginBox {width: 400px;height: 600px;background-color: #0c1622;margin: 100px auto;border-radius: 10px;box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);padding: 40px;box-sizing: border-box;}h2 {text-align: center;color: aliceblue;margin-bottom: 30px;font-family: 'Courier New', Courier, monospace;}.item {height: 45px;border-bottom: 1px solid #fff;margin-bottom: 40px;position: relative;}.item input {width: 100%;height: 100%;color: #fff;padding-top: 20px;box-sizing: border-box;}.item input:focus+label,.item input:valid+label {top: 0px;font-size: 2px;}.item label {position: absolute;left: 0;top: 12px;transition: all 0.5s linear;}.btn {padding: 10px 20px;margin-top: 30px;color: #03e9f4;position: relative;overflow: hidden;text-transform: uppercase;letter-spacing: 2px;left: 35%;}.btn:hover {border-radius: 5px;color: #fff;background: #03e9f4;box-shadow: 0 0 5px 0 #03e9f4,0 0 25px 0 #03e9f4,0 0 50px 0 #03e9f4,0 0 100px 0 #03e9f4;transition: all 1s linear;}.btn>span {position: absolute;}.btn>span:nth-child(1) {width: 100%;height: 2px;background: -webkit-linear-gradient(left, transparent, #03e9f4);left: -100%;top: 0px;animation: line1 1s linear infinite;}@keyframes line1 {50%,100% {left: 100%;}}.btn>span:nth-child(2) {width: 2px;height: 100%;background: -webkit-linear-gradient(top, transparent, #03e9f4);right: 0px;top: -100%;animation: line2 1s 0.25s linear infinite;}@keyframes line2 {50%,100% {top: 100%;}}.btn>span:nth-child(3) {width: 100%;height: 2px;background: -webkit-linear-gradient(left, #03e9f4, transparent);left: 100%;bottom: 0px;animation: line3 1s 0.75s linear infinite;}@keyframes line3 {50%,100% {left: -100%;}}.btn>span:nth-child(4) {width: 2px;height: 100%;background: -webkit-linear-gradient(top, transparent, #03e9f4);left: 0px;top: 100%;animation: line4 1s 1s linear infinite;}@keyframes line4 {50%,100% {top: -100%;}}.message-box span{background: #e3e3e3;padding: 15px;min-width: 400px;text-align: center;border-radius: 5px;}.failure-box span{color: #ce3645;}.success-box span{color: #3cca58;}input[type=date]::-webkit-calendar-picker-indicator {/*border: 1px solid #0c1622;*//*border-radius: 2px;*//*box-shadow: inset 0 1px #0c1622, 0 1px #0c1622;*//*background-color: #0c1622;*/background-image: url("dateicon2.svg");/*background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);*//*color: #0c1622;*/}</style>
</head><body>
<div class="loginBox"><h2>Activation UUID</h2><div class="item"><input type="text" id="phoneInput" required><label for="">手机号</label></div><div class="item "><input type="date" id="dateInput"><label for="">有效日期</label></div><div class="item"><input type="password" id="codeInput" required><label for="">密码</label></div><div onclick="acceptCode()"><button class="btn" >生成UUID<span></span><span></span><span></span><span></span></button></div><div class="item" style="padding-top: 30px"><span>UUID</span><div class="result"></div></div>
</div>
</body>
<script>function getUUID(len, radix) {var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')var uuid = []var iradix = radix || chars.lengthif (len) {for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]} else {var ruuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'uuid[14] = '4'for (i = 0; i < 36; i++) {if (!uuid[i]) {r = 0 | Math.random() * 16uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]}}}return uuid.join('')};function acceptCode(){let phoneInput=document.getElementById('phoneInput')let dateInput=document.getElementById('dateInput')let codeInput=document.getElementById('codeInput')let result=document.querySelector(".result")const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;if (!phoneInput.value) {layer.alert('请输入手机号!', {icon: 2,offset: "200px",title: '提示'});return}if (!reg.test(phoneInput.value)) {layer.alert('请输入正确的手机号!', {icon: 2,offset: "200px",title: '提示'});return}if (!dateInput.value) {layer.alert('请选择有效时间!', {icon: 2,offset: "200px",title: '提示'});return}if (!codeInput.value) {layer.alert('请输入密码!', {icon: 2,offset: "200px",title: '提示'});return}if(true){layer.alert('生成成功', {icon: 1,offset: "200px",title: '提示'});result.innerHTML=getUUID(32, 16)}}
</script>
</html>

学习参考：

uuid生成

页面效果

页面效果2

针对input[type=date]属性样式的更改

【前端】一个好看的前端页面

序言突发奇想，看到这个特效还不错，就加工了一下，如果也能帮到你，很开心先上效果图部分代码讲解前端生成uuid function getUUID(len, radix) {var chars 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.s…...

编程日记 2023/4/29 4:36:08

目录相关文档前置准备构建镜像提交任务相关文档 https://nightlies.apache.org/flink/flink-docs-release-1.13/docs/deployment/resource-providers/native_kubernetes/ 前置准备 flink的lib目录下放入两个依赖 bcpkix-jdk15on-1.68.jar bcprov-jdk15on-1.69.jar 创建用户…...

编程日记 2023/4/29 4:31:07

如何判定自己适合自学编程还是报班？

首先在这里，不做偏向性推荐，主要还是看个人条件。宝剑锋从磨砺出，学习本身是一件艰苦的事情。在决定之前，建议先按照下图问自己三个问题自我检测。如果你还不能确定，自学和报班的优劣势分析，或许能帮你们…...

编程日记 2023/4/29 4:26:06

本地缓存解决方案Caffeine | Spring Cloud 38

一、Caffeine简介 Caffeine是一款高性能、最优缓存库。Caffeine是受Google guava启发的本地缓存（青出于蓝而胜于蓝），在Cafeine的改进设计中借鉴了 Guava 缓存和 ConcurrentLinkedHashMap，Guava缓存可以参考上篇：本地缓…...

编程日记 2023/4/29 4:21:05

Docker常用命令笔记

docker常用命令 1 基础命令 sudo docker version #查看docker的版本信息 sudo docker info #查看docker系统信息，包括镜像和容器的数量 2 镜像命令 1．sudo docker images #查看本地主机的所有主机镜像 #解释 **REPOSITORY **#镜像的仓库源TAG **** …...

编程日记 2023/5/30 3:05:02

Nachos系统的上下文切换

Fork调用创建进程在实验1中通过gdb调试初步熟悉了Nahcos上下文切换的基本流程，但这个过程还不够清晰，通过源码阅读进一步了解这个过程。在实验1中通过执行Threadtest，Fork创建子进程，并传入SimpleThread执行currentThread->…...

编程日记 2023/5/29 19:38:21

streamx平台部署

一. streamx介绍 StreamPark 总体组件栈架构如下， 由 streampark-core 和 streampark-console 两个大的部分组成 , streampark-console 是一个非常重要的模块, 定位是一个综合实时数据平台，流式数仓平台, 低代码 ( Low Code ), Flink & Spark 任务托…...

编程日记 2023/4/29 4:06:02

css中的background属性

文章目录一：background-repeat二：background-position三：background缩写方式三：background-size四：background-origin五：background-clip 在日常前端开发中，经常需要进行背景或背景图的处理。但…...

编程日记 2023/4/29 4:01:01

代码评审平台Gerrit安装配置方法介绍

Gerrit是一款开源免费的基于 web 的代码审查工具，是基于 Git 的版本控制系统。在代码入库之前对开发人员的提交进行审阅，检视通过的代码才能提交入库。本文记录如何安装部署gerrit平台。目录 Gerrit简介环境准备1. 安装Java2. 安装Git3. 安装nginx4. 安…...

编程日记 2023/4/29 3:56:00

一篇文章解决Mysql8

基于尚硅谷的Mysql8.0视频，修修改改。提取了一些精炼的内容。首先需要在数据库内引入一张表。链接地址如下。链接：https://pan.baidu.com/s/1DD83on3J1a2INI7vrqPe4A 提取码：68jy 会进行持续更新。。 1. Mysql目录结构 Mysql的目录结构…...

编程日记 2023/4/29 3:50:59

【Python】【进阶篇】6、Django视图函数

目录 6、Django视图函数1. 第一个视图函数1）HttpResponse视图响应类型2）视图函数参数request3）return视图响应 2. 视图函数执行过程 6、Django视图函数视图是 MTV 设计模式中的 V 层，它是实现业务逻辑的关键层，可以用…...

编程日记 2023/4/29 3:45:58

Latex常用符号和功能记录

公式下括号 \underbrace & \overbrace \begin{equation} \underbrace{L_1L_2}_{loss ~ 1} \overbrace{L_3L_4}^{loss ~ 2} \end{equation}L L 1 L 2 ⏟ l o s s 1 L 3 L 4 ⏞ l o s s 2 L \underbrace{L_1L_2}_{loss ~ 1} \overbrace{L_3L_4}^{loss ~ 2} Lloss 1…...

编程日记 2023/4/29 3:40:57

MySQL高级篇——索引的创建与设计原则

导航： 【黑马Java笔记踩坑汇总】JavaSEJavaWebSSMSpringBoot瑞吉外卖SpringCloud黑马旅游谷粒商城学成在线牛客面试题目录一、索引的分类与使用 1.1 索引的分类 1.1.1. 普通索引 1.1.2. 唯一性索引 1.1.3. 主键索引（唯一非空） 1.1.4…...

编程日记 2023/4/29 3:35:56

王一茗: “大数据能力提升项目”与我的成长之路 | 提升之路系列（三）

导读为了发挥清华大学多学科优势，搭建跨学科交叉融合平台，创新跨学科交叉培养模式，培养具有大数据思维和应用创新的“π”型人才，由清华大学研究生院、清华大学大数据研究中心及相关院系共同设计组织的“清华大学大数据能力提升项…...

编程日记 2023/4/29 3:30:55

MySQL:数据库的基本操作

MySQL是一个客户端服务器结构的程序, 一.关系型数据库关系型数据库是一个结构化的数据库，创建在关系模型（二维表格模型）基础上，一般面向于记录。主流的关系型数据库包括 Oracle、MySQL、SQL Server、Microsoft Access、DB2 等. …...

编程日记 2023/4/29 3:25:54

银行系统【GUI/Swing+MySQL】（Java课设）

系统类型 Swing窗口类型Mysql数据库存储数据使用范围适合作为Java课设！！！ 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果本系统源码地址：https://download.csdn.net/download/qq_50954361/87708777 …...

编程日记 2023/4/29 3:20:52

【社区图书馆】-《科技服务与价值链》总结

【为什么研究价值链】价值链及价值链协同体系是现代产业集群的核心枢纽，是推进城市群及产业集群化、服务化、生态化发展的纽带。因而推进价值链协同，创新发展价值链协同业务科技资源体系，既是科技服务业创新的重要方向，也是重塑生…...

编程日记 2023/4/29 3:15:51

工具链和其他-异步模块加载

目录 CMD/AMD Asynchronous Module Definition(AMD异步模块定义，语法风格) Common Module Definition ES6/CommonJS CommonJS ES6 Module 加载器示例总结 cmd和amd的区别现在有哪些异步加载方式整体结构编程：commonjs es6 module (有可能解…...

编程日记 2023/4/29 3:10:50

第一次使用R语言

在R语言中，“<-”符号与“”意义一样。另一种奇怪的R语言的等号表示方法，是以“->”表示，但是用得少。有些计算机语言，变量在使用前要先定义，R语言则不需先定义，可在程序中直接设定使用。若在Con…...

编程日记 2023/4/29 3:05:49

《语文教学通讯》栏目收稿范围

《语文教学通讯》创刊于1978年，是由山西师范大学主管，山西师大教育科技传媒集团主办的期刊。历年被人民大学书报资料中心转载、复印的篇幅数量均居同类报刊之首。国内刊号：CN 14-1017/G4，国际刊号：ISSN 1004-6097&…...

编程日记 2023/4/29 3:00:48

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...

编程新知 2026/1/23 10:24:30

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务三、…...

编程新知 2026/1/25 6:36:06

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【Oracle】分区表

个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

Device Mapper 机制

Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...

编程新知 2025/12/14 13:11:33

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备，并且图标都没了错误案例往上一顿搜索，试了很多博客都不行，比如 Ubuntu22.04右上角网络图标消失最后解决的办法下载网卡驱动，重新安装操作步骤查看自己网卡的型号 lspci | gre…...

编程新知 2026/2/6 13:01:28

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据，你需要完成以下配置步骤： ✅ 一、在 SQL Server 端配置（服务器设置） 1. 启用 TCP/IP 协议打开 “SQL Server 配置管理器”。导航到：SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展，企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心，成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为若依后台管理框架的系统，它不仅支持跨平台应用，还能提供丰富…...

编程新知 2026/2/4 15:23:03

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1， 携带经纬度海拔的话题主要有三个： /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码，来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2026/2/7 2:24:22

序言