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

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

news 2025/7/7 23:24:18

序言

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

先上效果图

部分代码讲解

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

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/7/7 12:57:13

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2025/7/7 10:57:37

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/7/5 10:00:47

条件运算符

C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...

编程新知 2025/7/6 13:40:50

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/5 19:48:37

el-switch文字内置

el-switch文字内置效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/7/7 22:02:46

【单片机期末】单片机系统设计

主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图一、题目要求二、绘制系统状态流图题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。三、利用定时器产生时…...

编程新知 2025/7/4 19:33:23

SpringTask-03.入门案例

一.入门案例启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/6/24 15:42:17