- 博客(70)
- 收藏
- 关注
RSS订阅原创 JQ--上传图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" co.
2020-11-13 10:32:18
632
原创 JQ--复制文本
//适合循环出来需要复制的内容 也适合单独的内容<div class="order_number"> <span>订单号:<text id="shop1">11111111</text></span> <input type="button" value="复制" class="qlj" onclick="copyToClip('1111111111')" /> </div> <script&..
2020-11-13 10:29:07
1298
原创 JQ--阻止点击事件冒泡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阻止点击事件冒泡</title> <style> .father { width: 400px;.
2020-11-13 10:14:36
1273
原创 switch——好用的JQ开关按钮
<div class="testswitch"> <input class="testswitch-checkbox" id="onoffswitch" type="checkbox"> <label class="testswitch-label" for="onoffswitch"> <span class="testswitch-inner"></span> <span class="testswitch-swit.
2020-10-24 15:33:17
1249
原创 前端与安卓和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
624
原创 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
1921
原创 怎么实现微信小程序跳转外部浏览器
小程序是不支持跳转外部浏览器的。更别说访问链接下载APP了，不过我们可以把需要的下载的地址放到生成的二维码里面，让用户来扫二维码进行下载APP或者访问需要的链接
2020-07-21 11:55:05
11700
6
原创 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
2535
原创 点击文字同时选中checkbox radio按钮 label实现
<div class="divFlex" data-price="0.00" data-value="0"> <p class="p"> <label class="label-input" data-price="0" data-value="0"> <input type="radio" class="radio" name="m_c.
2020-07-09 15:47:47
511
原创 html2canvas 把标签合成为canvas图片
<style> #can{ background:red; height:200px; width:200px; text-align: center;line-height:200px;}<style><div id="can"> 合成为图片</div><img class="info_fofo" src="" />//先引入js文件<script src="http:/.
2020-05-22 10:45:20
490
原创 Vue keep-alive的作用
最常见的的场景： 从 列表页-->详情页，详情页 -->列表页。我们希望，从 详情页-->返回列表页 的时候页面的状态是缓存，不用重新请求数据，提升用户体验。keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。实现原理： 其实就是created 时候将需要缓存的vnode节点放到cache中在render的...
2020-05-22 09:59:24
713
原创 jQ -- 整合radio选中样式改变并拥js控制选中
//css样式input[type="radio"]+label::before { content: "\a0"; display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin-right: 5px; border-radius: 50%; text-indent: .15em; border: 1px solid #CCCCCC;.
2020-05-22 09:58:33
447
原创 table表格里面的数量竖向相加
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docume...
2020-04-11 10:31:47
539
原创 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
196
转载 如何在浏览器网页中调用QQ聊天
很多时候，我们在网站中需要加入联系QQ的功能，我下面就来说下在web页面中调用QQ聊天是如何实现的，直接上代码：<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
2019-10-18 16:41:05
1031
原创 Vue-cli 4安装
10月16日，官方发布消息称Vue-cli 4.0正式版发布,让我们看看更新了什么。安装的方式和vue-cli3.0的是一模一样的，对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样npm install -g @vue/cli查看版本：安装脚手架vue create hello-world default 是 使用默认配置 ...
2019-10-17 14:41:18
2253
原创 React 组件化 Todolist
1.先建立两个js文件 1.App.js 2.Text.js 组件A （App.js）import React,{Component,Fragment} from 'react';import Text from './Text' //同级目录下引入 Text.js文件class App extends Component{ constructor(props){ ...
2019-09-26 17:41:43
319
原创 babel-loader和webpack版本不一致，导致项目启动失败
使用create-react-app脚手架创建好一个项目之后，我的项目名称是my-react，在项目下使用npm start启动程序，但是在这一步出现错误意思是说用create-react-app创建项目的时候所用到的babel-loader依赖是8.0.6版本的，但是在我所创建项目的node_modules下的babel-loader版本是7.1.5的版本。所以我要把版本升级才可以启动项...
2019-09-26 14:05:46
5417
1
原创 React脚手架搭建项目
准备东西 Node环境安装 （安装最新的Node） npm或 yarn查看版本 node -v（版本至少超过6） npm -v（版本至少超过3）全局安装react脚手架命令npm install -g create-react-app安装脚手架项目create-react-app my-react 以后在自...
2019-09-26 13:12:12
548
原创 Vue底部导航icon图标或图标切换功能实现
功能需求：底部导航切换页面，同时切换图片。底部为公共组件 通过click点击事件获取下标来进行类名动态切换图标。这里之所以使用v-show，因为底部导航要进行频繁的切换。<template> <footer class="footer"> <ul> <li v-for="(item, index) of...
2019-09-24 13:43:37
7423
2
转载 一步步教你使用rem适配不同屏幕的移动设备
1.先说说几个前端常用的几个单位的概论：1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。 2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位...
2019-09-24 10:09:09
283
原创 Vue scoped属性的作用
功能作用： 实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。实现原理： 可以进行观察DOM结构来发现：vue在DOM结构以及css样式上加上唯一的标记，保证唯一性来达到样式私有化，来保证不会被污染全局的作用。 使用栗子：<template> <div class="nav">hi</di...
2019-09-12 16:49:50
2229
原创 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
511
原创 jQuery选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
2019-08-05 14:53:15
108
原创 开发中遇到的问题（一）window 下拿不到 $(document).scrollTop()
今天开发的过程中遇到 在window 下拿不到 $(document).scrollTop() ，这让我很郁闷因为导航头部是共用的。最终发现有两个css文件，另一个文件中把body的高度设置成了100%；在把html,body的高度样式设置为100%的情况下那麽$(window).scroll方法将检测不到正确的滚出高度（0），导致滚动监听事件失效，解决方法：设置html,body{heigh...
2019-07-31 11:03:55
1100
原创 Vue v-if和v-show的区别
使用v-if和v-else或v-else-if之间不能添加其他元素。<p v-if="type==1">正确示范</p><p v-else>索隆</p>v-else元必须紧跟在带v-if或者v-else-if后面<p v-if="type==1">错误示范</p><p>路飞</p&g...
2019-07-25 18:23:05
476
原创 三目运算符
三目运算符记录贴（一）19/7/18<body> <button class="btn">按钮</button></body><script> var a =1; a>0? $('.btn').hide():$('.btn').show() // if(a > 0){ // $('....
2019-07-18 18:10:30
213
原创 Vue中v-model的数据双向绑定
<template> <div id="app"> <div id="example-5"> <select v-model="selected"> <option disabled value>请选择</option> <option>小明</opt...
2019-07-16 16:46:08
222
原创 Vue反向代理（解决跨域问题）
在config文件中index.js文件里第13行配置；起初是这样的：module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, //第13行 // Various Dev Server set...
2019-07-12 10:28:17
1281
原创 Vue路由懒加载
路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。（官方是这样定义的） 实现懒加载起初是这样的： import HelloWorld '@/components/HelloWorld ' routes: [ { p...
2019-07-12 10:14:50
152
原创 v-for指令的使用
当在组件中使用 v-for 时，key 现在是必须的是为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性1.简单插值的使用<template> <p>{{list[0]}}</p> <p>{{list[1]}}</p> <p>...
2019-07-11 14:56:56
3766
原创 Vue项目脚手架搭建
安装淘宝镜像就是为了快速的安装npm包。（网速不好的建议使用）全局安装npm install-g cnpm--registry=https://registry.npm.taobao.org 安装脚手架cnpm install vue-cli创建项目vue init webpack myapp? Project name myapp (起项目名字)...
2019-07-05 16:37:49
787
原创 定时器和延时器
//定时器 写个小栗子：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
1444
原创 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
406
原创 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
3370
转载 JS实现html页面点击下载文件的两种实现方法
1.使用<a>标签来完成<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>这样当用户打开浏览器点击链接的时候就会直接下载文件。但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“downlo...
2019-06-19 14:57:06
3041
原创 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
388
原创 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
502
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人