JavaScript+css+html
关注
分享
扫一扫
JavaScript+css+html基础
依赖_赖
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue3.0 通过ref 动态绑定与获取 dom
vue3.0动态设置ref并获取dom原创 2023-07-12 11:39:26 · 1862 阅读 · 0 评论 -
formData 实现文件上传或导入
html部分： 结合input标签<div class="panel-btn btn-box"> <el-button class="audit-btn" size="mini" :loading="importLoading">导 入 </el-button> <input class="import-input-file" :disabled="!manipulatio原创 2021-12-01 11:00:20 · 813 阅读 · 0 评论 -
h5移动端适配
px：是分辨率的尺寸单位em：相对于父元素rem：相对于HTML根元素vw：视口宽度的 1/100，vh：视口高度的 1/100rem结合js实现适配新建rem.js方法，在main.js引用该方法// 设置 rem 函数const baseSize = 32;// 设置 rem 函数function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientW原创 2021-06-22 17:58:10 · 866 阅读 · 0 评论 -
通过svg实现动画效果
1.拿到psd格式文件，选中相应图层，右键复制svg或者导出为svg2. 使用svg标签渲染，复制的svg中width和height单位是cm<div class="svg-streamline"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="203" height="110.5"> &l原创 2021-04-30 09:46:16 · 1743 阅读 · 0 评论 -
树结构之递归查询
1.通过节点name，查找对应节点id//instrumentList: 数据集合（树状）//name： 节点名称this.seekSameName(this.instrumentList, name)// 遍历寻找相同的id seekSameName (list, name) { list.map((t)=>{ if (t.name === name) { this.dataQueryForm.instrumentId = t.id //找到id，赋值原创 2021-02-02 13:58:01 · 506 阅读 · 0 评论 -
axios的二次封装
在common文件夹下新建一个axioRequest.js文件import axios from "axios";export default { get:function (url,headers,success,params={}) { axios({ url: url, method: "get", ...原创 2019-06-25 17:28:12 · 299 阅读 · 0 评论 -
短信验证码登录
1、新建一个ems.ejs文件<div> <label for="phone">手机号：</label> <input name="phone" id="phone" type="text"> <button onclick="sendCode()"&原创 2019-01-11 10:24:12 · 3056 阅读 · 0 评论 -
promise-mysql的使用
1、下载：npm install promise-mysql2、创建config文件夹下的mysqlpool.js文件，代码如下：const mysql=require("promise-mysql");//连接数据库const pool=mysql.createPool({ host:"localhost",//ip地址 user:"root",//用户名原创 2019-01-11 09:11:42 · 3640 阅读 · 0 评论 -
使用session和cookie存储用户登录信息
1.配置静态资源下载session模块：npm install express-session -s导入session，保存在服务器，传的内容是session在服务器中的内存地址const session =require(&amp;quot;express-session&amp;quot;)下载cookie模块：npm install cookie-parser -s导入cookie，保存在客户端硬盘上，传的内容是用...原创 2019-01-07 18:29:16 · 2735 阅读 · 0 评论 -
jQuery的ajax方法——请求数据
1、使用nodejs配置本地服务器 window.function () { getData() }2、在浏览器运行程序，并发送数据请求3、在路由中拦截请求，调用控制器中相应方法getStuData，返回数据router.get(&quot;/ajaxGetData.do&quot;,stuCtrl.getStuData)4、使用ajax获得数据...原创 2019-01-04 13:25:09 · 461 阅读 · 0 评论 -
原生JavaScript的ajax方法——请求数据
1、使用nodejs配置本地服务器 window.function () { getData() }2、在浏览器运行程序，并发送数据请求3、在路由中拦截请求，调用控制器中相应方法getStuData，返回数据router.get(&amp;amp;amp;quot;/student.do&amp;amp;amp;quot;,stuCtrl.getStuData)4、使用ajax获得数据原创 2019-01-04 13:11:33 · 338 阅读 · 0 评论 -
Promise、Generator、Async的对比
实现功能如下，通过axios发送请求，获得giuthub的用户，再通过第一个用户名获的该用户的reposPromise的写法 <script src="http://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <script> let use...原创 2019-07-04 18:13:40 · 277 阅读 · 0 评论 -
primise的all和race的用法
1、Promise是异步编程的一种解决方案，其实是一个构造函数，有all、race、reject、resolve这几个方法，原型上有then、catch等方法。2、promise.all主要用于一次性执行多个异步方法，并且按传入顺序执行。该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行then方法。//成功的时候返回的是一个结果数组，而失败的时...原创 2019-07-04 11:45:58 · 825 阅读 · 0 评论 -
es6标签模版字符串
css代码： <style> .hightlight{ color: red; } </style>js代码： <script> //标签模版字符串 function highlight(strings,...values) { // strings...原创 2019-06-28 18:59:24 · 760 阅读 · 0 评论 -
文字隐藏与显示
1、设置文字不被鼠标选中 -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;2、文字超出部分显示省略号// 单行文本overflow: hidden;text-overflow:ellipsis;white-s...原创 2019-09-05 18:12:41 · 356 阅读 · 0 评论 -
less的基本使用
less编译器1、less.js当页面运行的时候，把less编译成css2、考拉编译写的时候就把less编译成css，html直接引用css下载地址：http://www.openkoala.org/download.html3、node编译less变量1、变量的定义@变量名：值2、变量的使用作为属性值使用：@变量名作为选择器或者属性名使用：@{变量名}变量的作用域先...原创 2019-07-08 18:51:26 · 602 阅读 · 0 评论 -
Flex弹性布局
块级元素：.box{ display: flex;}行内元素：.box{ display: inline-flex;}设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。flex-direction属性：.box { flex-direction: row | row-reverse | column | column-...原创 2019-04-04 13:06:28 · 260 阅读 · 0 评论 -
居中对齐的方法汇总
水平居中对齐：1、文本内容居中 text-align: center;2、块级元素，且有固定宽度margin: 0 auto;3、块级元素width: 百分数;margin-left: (1-百分数)/2;垂直居中对齐1、单行文本，设置行高等于所在区域的高度height: 200px;line-height: 200px;2、多行文本居中高度不固定时，高度只能通...原创 2018-11-14 17:47:01 · 1920 阅读 · 0 评论 -
设置隐藏的方法
1.元素不占位，直接消失display: none;2.隐藏元素，占位visibility: hidden;3.不占位，超出部分隐藏overflow: hidden;4.设置透明度，全部透明，opacity: 0到1;5.调整rgba，背景透明background-color: rgba(68,166,255,0到1);...原创 2018-11-09 10:29:51 · 222 阅读 · 0 评论 -
margin小问题
1.为第一个div子元素设置margin-top，子元素会将其div父元素一起拽下来解决方案：1.在子元素前面增加内容2.给父元素加边框3.给父元素设置overflow：hidden（推荐使用）2.给两个div盒子之间设置margin外边距时，上下取最大值，左右取和值...原创 2018-11-09 10:09:18 · 141 阅读 · 0 评论 -
css3之背景渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。语法格式：background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置…)；&lt;!doctype html&gt...原创 2018-10-13 10:51:27 · 362 阅读 · 0 评论 -
flex伸缩布局
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配min-width 最小值 max-width: 最大值min-width: 280px 最小宽度 不能小于 280max-width: 1280px 最大宽度 不能大于 12802.flex-direction调整主轴方向（默认为水平方向）flex-direction: column 垂直排列...原创 2018-10-13 10:07:36 · 661 阅读 · 0 评论 -
CSS3之3D变形，实现大海波涛
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;@keyframes 动画名称 {from{ 开始位置 } 0%to{ 结束 } 100%}实现代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8&am原创 2018-10-12 19:52:41 · 415 阅读 · 0 评论 -
CSS3之2D变形
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果1、 移动 translate(x, y)使定位的盒子水平垂直居中div{ width: 220px; height: 200px; background-color: pink...原创 2018-10-08 22:01:34 · 314 阅读 · 0 评论 -
经过图片时添加透明边框
效果图html部分代码： &lt;div&gt; &lt;img src="img/pic.jpg"/&gt; &lt;/div&gt;css部分代码： div{ height: 150px; width: 150px; position: relat原创 2018-09-30 10:51:36 · 389 阅读 · 0 评论 -
css3 新增
1、属性选择器选取标签带有某些特殊属性的选择器 我们成为属性选择器 div[class=demo] { /* 选出div中类名为demo的标签 */ color: pink; }div[class^=font] { /* 选出div中类名以font开头的标签 */ color: pink; }div[class$=footer] { /* 选出div中类名以foo...原创 2018-09-30 10:11:43 · 186 阅读 · 0 评论 -
通过css切割隐藏外边框，实现十字架或者网格效果
实现代码： &lt;style type="text/css"&gt; div{ margin: 40px; width: 320px; height: 300px; overflow: hidden;/*超出部分隐藏,切割掉下边框和右边框*/ } div ul{ /*一个li元素宽度为81px,width大小只要大于（81 x...原创 2018-09-29 15:16:34 · 1534 阅读 · 0 评论 -
网页标题添加ico图标
每个网站都有自己的标题和logo，当访问某个网站时，浏览器窗口会显示该网站的logo+标题，以便清晰的知道我们正在访问的是哪一个网站，如：实现步骤：1、找到logo，访问https://www.网站名.com/favicon.ico2、右键保存该图标至根目录3、引用该图标实现代码： &amp;lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&a原创 2018-09-27 09:16:00 · 1482 阅读 · 0 评论 -
字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 在移动端响应式中，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了， 这就是字体图标字体图标优点：1、可以做出跟图片一样可以做的事情,改变透明度、旋转度等… 2、但是本质其...原创 2018-09-26 15:34:49 · 681 阅读 · 0 评论 -
滑动门技术
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。html布局如下： &lt;a href="#"&gt; &lt;span&gt;我的首页&lt;/span&gt; &lt;/a&原创 2018-09-22 11:00:13 · 256 阅读 · 0 评论 -
去除图片之间的空白缝隙
在设置css边框样式中，图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。解决的方法就是：给img 添加vertical-align:middle | top等等。 让图片不要和基线对齐。（网易做法）img{ /*vertical-align: bottom;*/ vertical-align: top; ...原创 2018-09-21 11:35:34 · 3687 阅读 · 1 评论 -
显示与隐藏——仿土豆视频
通过现实与隐藏，实现仿土豆视频的做法，即当鼠标经过图片时显示播放按钮，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/ti原创 2018-09-21 10:59:47 · 343 阅读 · 0 评论 -
关于清除浮动的五种方法
清除浮动的本质：为了解决父级元素印子级浮动引起内部高度为0的问题。方式1:额外标签法（w3c推荐的方法）： 在最后一个浮动标签后，新添加一个标签优点：通俗易懂，书写方便。缺点：添加许多无意义的标签，结构化较差。.clear{ clear:both;}方式2:父级添加overflow属性方法.father{ overflow:hidden;overfl...原创 2018-09-19 09:25:19 · 969 阅读 · 0 评论 -
css中文本（text）和字体（font）属性
text-decoration属性在html语言中表示文本的修饰 none：取消装饰 underline ：下划线，与标签、效果相同 overline ：上划线 line-through ：贯穿线（删除线），与标签、效果相同 blink ：闪烁（因兼容性问题很少使用） ...原创 2018-09-12 10:31:18 · 6222 阅读 · 1 评论 -
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准，是m3u的一种，不过 编码方式是utf-8，是一种文件检索格式，将视频切割成一小段一小段的ts格式的视频文件，然后存在服务器中（现在为了减少I/o访问次数，一般存在服务器的内存中），通过m3u8解析出来路径，然后去请求。这样每次请求很小一段视频，可以做到近似于实时播放的效果。 目前WEB上主流的直播方案主要是HLS和RTMP，移动端主...转载 2020-04-27 14:47:34 · 22340 阅读 · 0 评论 -
canvas——往下跳小游戏
链接：https://pan.baidu.com/s/1p58D9oBs8qRKHPco7acW2w提取码：vaja原创 2018-12-28 21:32:28 · 524 阅读 · 0 评论 -
canvas——俄罗斯方块小游戏
链接：https://pan.baidu.com/s/1EMYeQEgYuwhUaQ1bWlw9Aw提取码：ez6e原创 2018-12-28 21:30:24 · 226 阅读 · 0 评论 -
内嵌元素和块级元素
块级元素：一般用来搭建网站架构、布局、承载内容内嵌元素：用以“强调、区分样式、上标、下标、锚点”等等inline-block：既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性，也可以设置 vertical-align块级元素与内嵌元素的区别：1、块级元素默认独占一行。垂直方向排列内联元素默认会再一条直线上，是在同一行的。水平方向排列2、块级元素...原创 2018-11-02 16:02:28 · 451 阅读 · 0 评论 -
html5新增表单属性
常用新属性1、placeholder用法：&amp;lt;input type=&quot;text&quot; placeholder=&quot;请输入用户名&quot;&amp;gt;含义：占位符 ，当用户输入的时候里面的文字消失 。删除所有文字，自动返回2、autofocus用法：&amp;lt;input type=&quot;text&原创 2018-09-29 16:54:30 · 304 阅读 · 0 评论 -
pdf.js结合iframe实现文件（word，pdf）预览，且可通过手势缩放
1.下载pdf.js ，存放在public文件中地址https://download.csdn.net/download/weixin_39150852/131052742.获取需预览的文件信息，存在sessionStorage组件中使用iframe预览文件<template> <div class="main-page-container"> <div>文件名： {{pdfName}}</div> <div class=原创 2020-11-11 17:46:02 · 8100 阅读 · 7 评论