HTML+CSS+JS
关注
分享
扫一扫
记录一些常见的HTML、CSS、JS问题和技巧
ddx2019
这个作者很懒，什么都没留下…
展开
-
将驼峰法转为下划线连接的小写格式 （如fullName转为 full_name）
将驼峰法转为下划线连接的小写格式在排序时，后端要求，将驼峰命名的字段，如 fullName 等数据，更改为 full_name 的写法（数据库写法），传给他。export function changeHumpToLowerCase(str) { // str ====> fullName let arrs = str.split(""); // 将字符串用split拆为单个字母为元素的数组，fullName ====> ["f", "u", "l", "l", "N", "a原创 2020-08-12 09:06:57 · 997 阅读 · 0 评论 -
让盒子水平垂直居中的方法小结
一、绝对定位 + margin，让明确宽高的盒子水平垂直居中于窗口<!DOCTYPE><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" > <meta http-equiv="X-UA-Compatible" content原创 2020-06-28 09:04:19 · 2203 阅读 · 1 评论 -
position:absolute下，top:0,right:0,bottom:0,left:0 结合margin:auto的作用（让明确宽高的盒子水平垂直居中于父元素）
绝对定位 + margin，让明确宽高的盒子水平垂直居中于窗口<!DOCTYPE><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" > <meta http-equiv="X-UA-Compatible" content="原创 2020-06-20 16:38:30 · 5503 阅读 · 3 评论 -
鼠标 hover时盒子阴影效果，凸起效果_ box-shadow的应用
盒子阴影 <div class="test-shadow"></div><style> .test-shadow{ background-color: rgb(180, 224, 241); width: 200px; height: 300px; margin-top:30px; } .test-shadow:hover{ margin-top: 0px;/*和ho原创 2020-06-03 09:01:28 · 5026 阅读 · 0 评论 -
Element实现表格嵌套、多个表格共用一个表头的方法；
一、分析需求这里先上一张图说明 需求：根据后端返回的数据 （res 是一个数组，它的元素是一个对象，对象里面的ext属性是一个对象，它又包含了，default、free和pay三个属性，且这三个都是数组格式。）：渲染出一个这样子的 表格 ：res数据：res的每一个元素的直接属性name （即为邮费模板名称，比如成都运费模板），res的ext属性下的三个数组 defa...原创 2020-05-09 09:04:50 · 5745 阅读 · 2 评论 -
JS将得到的秒数转为最大单位为天，最小单位为秒的格式（将时间差秒转为天时分秒格式）
function timeStamp( second_time ){var time = parseInt(second_time) + "秒";if( parseInt(second_time )> 60){ var second = parseInt(second_time) % 60; var min = parseInt(second_time / 60); time ...转载 2020-05-07 16:33:20 · 512 阅读 · 0 评论 -
2019年5月~2020年4月，我积累的的网址（学习网站等），小技巧
搜索地stackoverflow，程序设计领域的问答网站，主要用于搜索解决问题的方法；CodePen，一款可在线编辑制作前端页面的工具，上面可搜到很多小demo,且提供常见的 js、css 库，并且支持流行技术（如 SASS），免去了我们自建平台的麻烦。开发者文档：MDN，Web 文档技术社区：CSSclip-path ,在线编辑 clip-path 的效果图，且可以拿到...原创 2020-04-29 13:36:22 · 1314 阅读 · 0 评论 -
四月，你好 （一张小海报）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>四月，你好</t...原创 2020-04-22 09:08:39 · 166 阅读 · 0 评论 -
获取N天前的时间（ 过去七天的年月日、toLocaleDateString的应用 、获取时间段字符串,Date.now()和new Date().getTime()的使用 ）
function getPastDate(num){ // num 是过去多少天，如过去七天，num为7;startTime 开始时间是过去；endTime结束时间是此刻； let curDate=new Date(); // 获取当前时间对象 const startDate=new Date(curDate.getTime()-(num*24*3600*1000));// 获取当前...原创 2020-04-20 09:27:08 · 1632 阅读 · 0 评论 -
函数的内部属性————Arguments对象
arguments是一个类数组对象，包含着传入函数中的所有参数。主要用途是保存函数参数，但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。函数的内部属性 arguments的作用： 用于存储调用函数的时候传入的所有实参，arguments是一个类数组对象，他的元素个数取决于实参列表， 和形参无关；arguments.callee()表示...原创 2020-04-17 09:17:50 · 702 阅读 · 0 评论 -
鼠标经过按钮上方 ，hover的时候，侧边栏向右滑出显示，且可点击（hover显示侧导航）
1. html代码示例：结构要点： 要显示的侧边栏是按钮的子级 <div class="btn_slidebar"> 显示侧边栏 <ul class="test_slidebar"> <li>分类1</li> <li>分类2</li> <li&g...原创 2020-03-29 13:13:46 · 2121 阅读 · 0 评论 -
鼠标hover时，实现元素的显示隐藏，悬停效果，hover出现的元素可点击
显示隐藏 显示的框内可点击的例子描述：鼠标移入seen显示一个浮框 seen-show，鼠标seen移出后浮框seen-show消失，当鼠标在seen-show的内部的时候，鼠标可点击seen-show里的按钮。方法：seen 在 hover的时候，seen-show显示把seen-show默认为display：none;隐藏，在seen：hover的时候，接着seen-show的dis...原创 2020-03-29 13:12:06 · 7661 阅读 · 0 评论 -
表白信———A letter expressing miss
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> A letter f...原创 2020-03-14 17:25:05 · 218 阅读 · 0 评论 -
不知道取个啥名（CSS翻转，transform）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-03-17 09:19:22 · 126 阅读 · 0 评论 -
皮卡丘之————CSS变量和CSS3新特性的使用
知识点 ：CSS:CSS变量的应用，基本的css属性CSS3 ：边框border 、圆角border-radius、盒子阴影box-shadow、径向渐变radial-gradient、transform中的 rotate，translateX ，动画@keyframes实现多边形 实现了皮卡丘 鼻子的闪动和眼睛的闪烁等效果效果，代码实现：<!DOCTYPE html>&l...原创 2020-03-18 11:54:24 · 283 阅读 · 0 评论 -
CSS部分函数(calc()、attr()、rgb()、rgba()、var() 、cubic-bezier()、hsl()、hsla()、渐变)
1. calc( )函数calc() 函数用于动态计算长度值。①： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；②： 任何长度值都可以使用calc()函数进行计算；③： calc()函数支持 “+”, “-”, “*”, “/” 运算；④： calc()函数使用标准的数学运算优先级规则；例： 创建一个横跨屏的div,两边各有5...原创 2020-03-27 08:54:06 · 1858 阅读 · 0 评论