【前端】一个好看的前端页面
序言
突发奇想,看到这个特效还不错,就加工了一下,如果也能帮到你,很开心
先上效果图
部分代码讲解
前端生成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]属性样式的更改
【前端】一个好看的前端页面相关推荐
- 实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现
文章目录 概述 代码结构 shoplist.html shoplist.js shoplist.css common.js添加解析日期的公共方法 FrontEndController添加路由 联调测试 ...
- 一个初级的前端工程师需要知道些什么?
一个初级的前端工程师需要知道些什么? 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的,底什么是前端后端.后台),了 ...
- 【高校宿舍管理系统】第四章 创建前端项目以及完成登录页面
第四章 创建前端项目以及完成登录页面 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录 第四章 创建前端项目以及完成登录页面 前言 ...
- easyui dialog 不执行页面js_Spring Security(六):前端菜单,角色权限页面的搭建
文章回顾: Spring Security(一):整合JWT实现登录功能 Spring Security(二):获取用户权限菜单树 Spring Security(三):与Vue.js整合 Sprin ...
- 如何零基础转行成为一个自信的前端达人
一,背景介绍 我本科学的是国际贸易,乱选的专业.毕业后做了半年外贸,实在不喜欢,然后去做英文编辑了.第二份工作也很无聊,就是写英文软文,发表在国外的行业期刊上,给公司做广告.然后也做英文官网的内容.这 ...
- 一个新进前端小白实习僧的初次探索
我不怕万人阻挡,只怕自己投降 一个新进前端小白实习僧的初次探索 在学校的时候写过几个静态页面.用过一些简单的JavaScript,写过一些基础的CSS,去应付课程项目,却也仅仅于此. 谁也没想到会阴差 ...
- 前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
- 如何快速了解一个新的前端项目?
在接受一个新的项目后,要想快速了解它,就需要一种抽象思维进行剥茧抽丝,遵守项目搭建的基本规律,犹如庖丁解牛,游刃有余. 以达到可能给快速跟上团队成员的节奏进行开发.下面我就给大家总结一下,拿到一个新的 ...
- vue 传参 微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结 最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
最新文章
- 卷积神经网络(二):卷积神经网络CNN的BP算法
- 【杂谈】有三AI秋季划增加生成对抗网络小组,你准备好大GAN一场了吗
- android按钮进度动画,android – 在按钮后面放置一个进度条
- php 二维数组值相加,php二维数组指定某元素后面的值是和前面的值相加起来的...
- 线程阻塞和挂起(网络收集)
- SQL Server 与 Excel,Access 数据表的导入导出(注:参照博园.NET大观)
- 判断浏览器是否支持websocket的方法
- Ceilometer - Install the API behind mod_wsgi
- java非静态方法调用静态方法_java - 无法对非静态方法进行静态引用
- 14-模板方法模式Quarkus实现
- 第二次软件工程作业——模仿节奏大师官网制作的网页
- rgb转yuv422 matlab,MATLAB读取一张RGB图片转成YUV420格式、YUV422格式、YUV444格式
- 波段划分相关资料总结
- linux 系统的磁盘 mbr 转gpt方法
- 我是大海里的一页扁舟
- 【转载】C#中List集合First和FirstOrDefault方法有何不同
- 超详细!Jmeter性能测试(一)
- 【论文翻译】转移学习推断跨异构网络的社会联系
- 冒泡排序法定向冒泡排序法的Python实现
- 中国医学计算机成级别像杂志,中国医学计算机成像杂志
热门文章
- mysql string agg_如何从string_agg()中以正确的顺序得到结果
- 品管七大手法-2排列图(转载)
- 心血来潮:重新温习一下C语言的指针
- 数据可视化常用工具推荐
- “hulu客厅”开放,Spark培训计划报名啦
- 均州古城(走遍中国08.10.27)
- 快速应用计算机制作pop,9计算机练习题
- JavaScript 逆向爬取实战
- 程序员考公指南:逃离996的最强出路,拒绝秃顶的最佳方法
- stata 求输出相关系数矩阵命令_Stata外部命令:那些最常用的和最新的命令