- 博客(43)
- 收藏
- 关注
RSS订阅
原创 JavaScript防抖、节流
JavaScript防抖函数防抖就是在函数需要频繁触发情况时 只有足够空闲的时间，才执行一次。 好像公交车司机会等人都上车后才出站一样。防抖就是防止事件频繁触发，针对最后一次触发才执行函数<!-- 场景 --><!-- 实时搜索、拖拽 -->html <input type="text" id="inp">js let oInp = document.getElementById('inp'); functio
2021-05-06 19:17:08
161
原创 一个简单的tab栏切换
简单的tab栏切换之前也写过tab栏切换感觉有一些复杂了，现在写一个简单的，主要是功能上的实现，样式可以再进行调整html <div class="wrap"> <button class="active">1</button> <button>2</button> <button>3</button> <div style="display:
2020-05-11 17:02:41
758
原创 浅克隆，深克隆实现
浅克隆 obj = { name: 'hu_time', age: 23, sex: 'male' } var obj1 = {}; // 浅克隆 function clone(origin, target) { var target = target || {}; for (let prop in origin) {
2020-05-11 16:52:28
251
原创 一个简单的列表全选功能
描述一个简单的列表的全选功能html代码<div class="wrap"> <label class="allCheck" > <input type="checkbox" id="check_all"> <span class="all-span"> </span> <span class="span-button">全选</span
2020-05-11 16:42:06
879
原创 JavaScript——数组
数组数组用于存放多个数据创建一个数组new Array(长度)长度，数组里面的数据总数，长度一定是一个非负整数new Array(数据, 数据, 数据…)创建一个数组，并初始化其每一项的值数组项：数组其中的一项数据[数据,数据,数据,…]创建一个数据，并初始化其每一项的值认识数组的本质数组的本质是一个对象length属性：数组的长度，会自动变化，值为最大下标+1...
2020-01-09 13:49:46
167
原创 手机号正则
作者：hu_time描述：手机号正则表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
2019-12-19 15:53:05
338
原创 js控制audio音量
作者：胡胜辉描述：记录一下学习的一个使用原生js控制audio音量的小案例，代码如下：html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
2019-12-11 16:48:18
5817
原创 微信分享网页时自定义标题、描述和图片
【描述】微信分享网页时自定义标题、描述和图片【参考链接】微信公众平台微信开发者文档【实现思路/研究成果等】微信分享网页时自定义标题、描述和图片用微信打开一个网页，选择右上角的“发送给朋友”后，收到的消息是这样的：而为了推广效果，我们更希望能自定义标题、描述和图片，效果如下图：下面介绍下怎样来实现这个功能步骤一：绑定域名所有的JS接口只能在公众号绑定的域名下调用...
2019-12-10 16:34:26
1348
原创 git推送代码注意问题
git推送代码时注意事项记录：合并代码之前先比较git fetch 库别名/库地址合并你需要合并的代码git merge origin/分支名然后查看合并代码的状态git status 查看需要解决的冲突问题解决完之后工作区代码推送到暂存区git add .暂存区代码推送到本地库git commit '日期 + 推送简介'本地库代码推送到远程库git push...
2019-12-10 16:17:33
655
2
原创 git常用命令
Git版本控制器windows系统安装1、git官网2、傻瓜式安装就行了 一路下一步3、使用 右键点击 Git bash Here 选项Linux 系统安装1、安装 yum install git2、 Git学习网址Git 基本认识1、对文件夹进行分区，工作区、暂存区、版本库2、工作区 (操作和编辑代码区域)3、暂存区 (将操作的代码临时存放的位置)...
2019-12-10 16:07:36
189
原创 左右结构tab栏分类切换
作者：胡胜辉描述：左右分类形式的tab栏切换之前写过两个上下结构的分类切换tab栏，来补充一个左右结构的切换效果。注：需要提前引入一下jq文件。代码可直接复用，手机端样式。pc端可能需要对样式进行细微的修改即可。代码：html: <!-- 商品分类 --> <div class="classify-box"> <div cla...
2019-11-27 16:40:14
1193
1
原创 重置页面样式
创建人：胡胜辉描述：重置一些html自带的一些样式，比如a标签的下划线，ul，li的小圆点等样式body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collaps...
2019-11-21 15:50:06
362
原创 一个简单的ajax请求
通过jq的ajax交互：提示：请提前引入jq包jquery官网 $.ajax({ url: "请求路径", type: "请求方法 GET/POST", dataType: "jsonp", //请求json数据 data: { "name": "name", ...
2019-11-21 15:47:00
369
原创 原生js监听手机返回键
创建人：胡胜辉描述：js监听手机返回键普通页面跳转，监听返回上一页：document.addEventListener("plusready", function() { // 监听到返回按键事件 plus.key.addEventListener('backbutton', function() { window.history.go(-1);...
2019-11-21 15:37:38
1422
原创 VUE CLI安装以及创建项目
创建人：胡胜辉描述：VUE CLI 安装以及创建项目Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本脚手架安装：可以使用下列任一命令安装这个新的包：npm install -g @vue/cli或者yarn global add @vue/cli你还可以用这个命令来检查其脚手架版本是否正确：vue --version运行以下命令来创建一个新项目：...
2019-11-18 09:55:04
203
原创 js自动触发跳转页面
js自动触发跳转页面js： window.onload = function(){ window.location.href= "http://www.baidu.com"; }
2019-11-11 15:55:02
2843
转载 Vue 页面跳转方式 与 参数传递
首先：要清楚的是：Vue中都是单页面应用居多，而所谓的页面跳转，也是通过路由重新渲染了一下视图，而不是真正的页面跳转。 一、标签跳转：<router-link> 映射路由1、不带参数跳转<!-- home页面（首页） --> <template> ...
2019-10-30 16:30:29
1702
原创 swiper滚动条
html:<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> test1 </div> </div> <div class="swiper-...
2019-10-26 14:53:00
839
原创 swiper分页器样式
html:<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> test1 </div> </div> <div clas...
2019-10-26 14:50:29
1560
原创 swiper网格布局
需要引用：使用前需要引用swiper.css文件以及swiper.js文件html: <!-- 选项列表 --> <div class="lie-list"> <div class="swiper-container"> <div class="swiper-wrapper"> ...
2019-10-26 14:37:08
1920
2
原创 swiper轮播图自动轮播失效问题
swiper轮播图设置自动轮播之后如果手动滑动之后，就不会再自动轮播了解决方法：var swiper = new Swiper(' .swiper-container', { pagination: { el: '.swiper-pagination', }, loop: true, autoplay:true, auto...
2019-10-24 11:23:25
6937
原创 图片廊
html: <div class="photo-box"> <div class="photo"> <img src="../images/index_list/7.png" alt=""> <span>图片1</span> ...
2019-10-22 09:31:13
210
原创 Vue脚手架安装以及搭建项目
基于安装了node的环境下再进行脚手架搭建项目安装脚手架：npm install -g vue-cli测试脚手架是否安装成功：vue --version创建新项目：vue init webpack vue-projectproject name ：项目名称project description：项目描述author：创建人install vue-rotuer：选择...
2019-10-22 09:18:42
238
原创 背景图固定内容超出可滑动
背景固定内容可滑动html``html, body, span, div, ul, li, header {padding: 0;margin: 0;}body,html{width: 100%;height: 100%;/background-color: #7f42bb;/}.main{width: 100%;height: 100%;background: ur...
2019-10-10 11:11:44
1082
1
原创 apicloud问题记录
播放视频 function shipin(){ var videoPlayer = api.require('videoPlayer'); videoPlayer.play({ texts: { head: { title: '顶部文字' } }, styles:...
2019-09-28 09:22:03
491
原创 swiper实现tab栏切换
作者：hu_time描述：运用swiper进行实现的一个tab栏点击以及滑动切换效果需要的包jqueryswiper4.5.0.jsswiper.cssjquery官网swiper.js包以及css包下载地址下载地址html：<!-- 点击按钮 --><div class="tab"> <div class="tabItem active...
2019-09-25 09:31:15
1744
原创 美化表单——单选按钮
作者：hu_time描述：自定义input单选按钮的样式例子中改变的是单选框的样式，多选框同理。改变属性即可html:<div> 请选择性别： <label class="radio-item"> <!-- 默认的按钮 --> <input name="gender" type="radio"...
2019-09-24 16:07:54
1443
原创 vue指令之v-bind
vue指令1.v-bind 绑定属性 （v-bind <==> : ）class绑定 [ ] { }style绑定 [ ] { }缩写：":"<!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- 内联字符串...
2019-09-18 14:18:03
396
原创 表单属性
今天熟悉了一下如何美化表单的一些元素，以及清楚默认的表单属元素样式，记录一下美化表单元素1、focus聚焦样式input:focus{//对轮廓进行偏移outline-offset:0;}元素聚焦时的样式2、checked单选或多选框被选中的样式html:css:input:checked+label{ color:red;}常见用法1.重置表单元素样式in...
2019-09-17 18:29:35
290
原创 复制文本功能
首先引入clipboard.js文件clipboard中文网地址：http://www.clipboardjs.cn/html:<div id='aaa'>复制的文本</div><button id="copy" data-clipboard-target="#aaa">复制input框中的内容</button>js:var clipb...
2019-09-16 17:33:46
228
原创 多容器切换样式
需要引入jquery才能实现点击切换样式的效果html: <div class="nav-box"> <div id="content" class="tab-box"> <div class="tab tab1 "> <span>全部</span &...
2019-09-16 17:29:36
204
原创 tab栏切换
html: <div class="tab"> <span >全部</span > </div> <div class="tab"> <span>待付款</span> <...
2019-09-16 17:20:56
164
原创 通过点击事件来更改图片的src路径
html：<img οnclick=“changeImage()” id=“img” src=“images/cbd.jpg”/>js：//改变图片的src属性—路径var img = document.getElementById(‘img’);function changeImage(){if(img.src.match(‘cbd’)){img.src = ‘imag...
2019-09-16 17:19:58
4490
原创 手机号码中间数字使用*号代替
如手机号码13123456789，中间四位用’*'代替，var phone=‘13123456789’方法1（字符串的截取）：var showPhone = phone.substr(0,3)+’****’+phone.substr(7);方法2（正则表达式）：var showPhone = phone.replace(/^(\d{3})\d{4}(\d+)/,"$1****...
2019-09-16 17:18:40
1963
原创 img标签设置了宽高但是src不给路径会出现边框
img标签设置了宽高但是src不给路径会出现边框img[src = “”]{opacity:0;}
2019-09-16 17:16:46
467
原创 当子容器内容超出父容器内容时子容器可以进行滚动
//横向在父类设置display: flex;overflow-x: auto;overflow-y: hidden;在子类设置flex-shrink: 0;//纵向css3新特性-webkit-scrollbar ，兼容性差点儿，简单overflow-x: hidden;overflow-y: scroll;//兼容性高，复杂/* 父容器设置宽度, 并超出部分不显示 /...
2019-09-16 17:14:49
3273
原创 表单提交checkbox为必选
html：<form> <p> <label><input id="checkbox" type="checkbox" name="rule">核对信息</label> </p> <p><label><input id="submit" type...
2019-09-02 16:31:28
3179
原创 多余文本显示三个点
记录一下在工作中遇到的一个超出文本显示省略号的问题，之前用下面通用的三行代码，结果失效了，然后又找的方法实现了一下。这是我在移动端遇到的不兼容问题，反正用最后的补充方法解决了它。代码直接可以用的。一行：overflow: hidden; text-overflow: ellipsis; white-space: nowrap;两行：word-break: break-all; ...
2019-08-26 11:42:23
762
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人