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

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

news 2025/11/9 5:24:28

序言

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

先上效果图

部分代码讲解

前端生成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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/8 15:55:51

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...

编程新知 2025/10/16 13:22:06

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2025/9/22 15:46:39

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/10/22 9:33:26

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31