HTML
初来乍到到
一切文章都是为了记录自己
展开
-
前端与安卓和ios交互
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>h5与安卓和ios交互传参测试例子</title> <style> .btn {.原创 2020-08-06 10:02:14 · 609 阅读 · 0 评论 -
img src图片路径不存在,则显示一张默认图片的方法
可以借用img标签的onerror事件,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下: <img src="images/logo.png" onerror="javascript:this.src='winter.png';" />//onerror指定一张图片//下面也是一种方法当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一.原创 2020-07-30 14:42:56 · 1903 阅读 · 0 评论 -
JQ--Tab效果切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-11-19 10:25:06 · 184 阅读 · 0 评论 -
JS--文章置顶功能
其实写法很简单Js基础好的很快就知道怎么写了,我之前没过今天写了个demo就顺便记录一下,以便记忆,俗话说:好记性不如烂笔头嘛!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...原创 2020-07-20 17:09:36 · 2525 阅读 · 0 评论 -
如何在浏览器网页中调用QQ聊天
很多时候,我们在网站中需要加入联系QQ的功能,我下面就来说下在web页面中调用QQ聊天是如何实现的,直接上代码:<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...转载 2019-10-18 16:41:05 · 1008 阅读 · 0 评论 -
js 数据按时间排序
运用了sort()方法进行排序说明如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:...转载 2019-06-12 10:04:22 · 19924 阅读 · 3 评论 -
CSS 小技巧
1. 使用:not()为导航添加/取消边框很多人会这样给导航添加边框,然后给最后一个取消掉:.nav li:not(:last-child) { border-right: 1px solid #666;}你也可以使用.nav li + li甚至.nav li:first-child ~ li,但是使用:not()可以使意图更加明确2. 给body添加l...转载 2019-06-12 10:21:46 · 223 阅读 · 0 评论 -
JavaScript js 实现时间相减得到所需的时差
var date1= '2019-04-26 11:05:32'; //开始时间 var date2 = new Date(); //结束时间 var date3 = date2.getTime() - new Date(date1).getTime(); //时间差的毫秒数 var subMinutes...原创 2019-06-12 13:53:29 · 721 阅读 · 0 评论 -
css样式缩放效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>缩放</title> <style> .box{ width: 200px; height: 200px; margin:200px auto; ...原创 2019-06-19 17:04:16 · 3360 阅读 · 0 评论 -
html文本溢出显示省略字符
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;单行实现省略号display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //控制行数overflow: hidden;多行实现省略号$(".text").ea...原创 2019-07-01 16:31:54 · 397 阅读 · 0 评论 -
Git 提交命令
git pull (拉取码云上更新的文件)git clone 拉取从码云上的东西git status 查看更新的文件git add .(暂时提交暂存区)git add LandingPage/SystemInformation.vue (提交单个文件)git commit -m '备注' (提交文件,'备注就是你修改了什么')git push (最后一步推到码...原创 2019-06-19 11:02:32 · 371 阅读 · 0 评论 -
定时器和延时器
//定时器 写个小栗子:var Date1 = setTimeout(function() { console.log(new Date())},1000) //间歇定时器var Date2 = window.setInterval(function() { console.log(new Date())},1000)window.clearInterval(Dat...原创 2019-07-03 18:02:13 · 1425 阅读 · 0 评论 -
Http状态码大全
基本涵盖了所有问题HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源HTTP 401.4 – 未授权:授权被筛选器拒绝HTTP 401.5 – 未授权:ISAPI 或 CGI 授权失败HTTP 403 – 禁止访问HTTP 403 – 对 Int...原创 2019-08-15 20:13:54 · 498 阅读 · 0 评论 -
js之动态的变换css属性和随机生成六位数字验证码
tab.click(function () { $(this).addClass("active"); $(this).siblings().removeClass("active"); });.active{ background: #ccc;}.siblings() 返回被选元素的所有同级元素const code = Math.floor(Math.ra...原创 2019-06-17 16:54:28 · 491 阅读 · 0 评论 -
JS实现html页面点击下载文件的两种实现方法
1.使用<a>标签来完成<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>这样当用户打开浏览器点击链接的时候就会直接下载文件。但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“downlo...转载 2019-06-19 14:57:06 · 3032 阅读 · 0 评论 -
html 鼠标样式
<span style="cursor:pointer">手形</span> <span style="cursor:crosshair">十字</span> <span style="cursor:text" >文本光标</span> <span style="cursor:wait" >等待</s...原创 2019-05-29 14:35:56 · 1274 阅读 · 0 评论 -
前端处理时间戳
话不多说直接上代码:new Date(1448954018000).toLocaleDateString()//1448954018000代表后台给的时间戳var timestamp = "2019-06-11T12:26:16.556Z"var date = new Date(+new Date(timestamp )+8*3600*1000).toISOString().rep...原创 2019-03-28 15:50:05 · 2373 阅读 · 0 评论 -
Vue插值文本换行问题
问题背景:后端返回的字符串带有\n换行符,但Vue将其插值渲染成div内部文本后,文本并不换行,换行符显示为一个空格目标:让文本在换行符处换行。解决方法:思路:实现文本换行有两种方法,一是HTML方法,即<br>标签;二是CSS方法,即white-space属性。方法1.使用v-html 首先,将字符串里的\n替换为<br>,然后用v-ht...转载 2019-04-09 14:04:35 · 2796 阅读 · 0 评论 -
vue组件传值---- 非父子组件传值
import Vue from 'vue'export default new Vue上面就是bus.js文件内容<template id="banner"> <div> <p>组件一</p> <button @click="tap()">点击传值</button&g...原创 2019-01-02 17:28:42 · 287 阅读 · 0 评论 -
vue按钮倒计时
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> <style...原创 2019-01-03 20:18:53 · 795 阅读 · 0 评论 -
vue计算属性小案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head>...原创 2018-12-29 16:33:17 · 569 阅读 · 0 评论 -
实现滚动到一定位置时,导航栏置顶的效果
告别js用css实现滚动到一定位置时,导航栏置顶的效果。<div class="nav">这里是导航栏所在的DIV容器。</div>css代码:.nav{ position:fixed; /* 绝对定位,fixed是相对于浏览器窗口定位。 */ top:0; /* 距离窗口顶部距离 */ left:0; /* 距离窗口左边的距离 */...原创 2019-04-16 11:11:31 · 4472 阅读 · 0 评论 -
react视频播放组件
通过NPM安装视频反应和对等依赖项npm install--save video-react react react-dom redux<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />(在index.html引入)import React ...原创 2019-04-13 11:01:25 · 6769 阅读 · 2 评论 -
电商头部导航栏滑动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>menu</title> <meta name="viewport" content="width=device-width,initial-scale=1...原创 2019-04-19 13:39:46 · 881 阅读 · 0 评论 -
vue拖拽
js 代码 在methos// 模块拖拽事件 move(e) { let Module = e.target; //获取目标元素 let _this = this; //算出鼠标相对元素的位置 let disX = e.clientX - Module.offsetLeft; let disY = e.clientY - Mo...原创 2019-05-09 17:08:46 · 421 阅读 · 0 评论 -
vuex
https://blog.csdn.net/qq_36407748/article/details/80174272一篇讲解的很细,很明白的关于vuex的文章。建议边看边练习。转载 2019-05-07 15:13:21 · 112 阅读 · 0 评论 -
vue 选项卡
<div id="box"> <!--点击设置msg的值 如果msg等于0,第一个a添加cur类名,如果msg等于1,第二个a添加cur类名,以此类推。 添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <div class="tab...原创 2019-04-10 11:33:19 · 232 阅读 · 0 评论 -
ES6去重和排序
其实代码很简单就是用了es6语法。 var arr=[1,3,3,5,9,4,8,6,7,2,8]; arr = Array.from(new Set(arr)) // 正序 console.log(arr.sort()) // 先正序在翻转就成了倒序了 console.log(arr.sort().reverse())1. ...原创 2019-05-17 14:15:49 · 2837 阅读 · 0 评论 -
js 字符串截取
以下我介绍几种常用的字符串截取的方法: //slicelet arr = '0123456789'console.log(arr.slice(0,3))//0就代表起始位置开始截取,3就是结束的位置(不包括3)(0和3都代表索引) // split var str = "012345;6789"; var arr = str.split(";");//指定每个字符的前后截取...原创 2019-06-05 10:49:52 · 145 阅读 · 0 评论 -
input输入框只读和禁用状态
1,设置input为只读状态,代码如下:<input readonly="readonly" />设置input为不用状态,代码如下:<input disabled="disabled" />button按钮设置禁用<button type="button" disabled="disabled">Click Me!</button&...原创 2019-05-31 11:24:26 · 7779 阅读 · 0 评论 -
marquee标签各种文字滚动
1.建立第一个滚动字幕。代码:<marquee scrollAmount=2 width=300>文字滚动</marquee>2.各参数详解:a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6。b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的...原创 2019-06-12 18:01:47 · 972 阅读 · 0 评论