Html/CSS/JS
haeasringnar
这个作者很懒,什么都没留下…
展开
-
Html获取父 同级 子元素,以及文本超出隐藏
Html里面通过JQ获取父元素、同级元素、子元素parent()获取父级元素 next()获取同级元素 children()获取子元素 children(‘span’)获取子元素里面的span元素 children(‘.myb’)获取子元素里面class为myb的元素文本超出隐藏.postcontent { width: 100%; overflow: hidden;原创 2017-12-21 14:03:24 · 4438 阅读 · 0 评论 -
nodejs 使用nodejs-websocket模块实现点对点实时通讯
1、首先安装好nodejs-websocketnpm install nodejs-websocket --save -g2、编写服务端var ws = require("nodejs-websocket")var AllUserData = new Array()// Scream server example: "hi" -> "HI!!!"var server = ws...原创 2018-11-25 13:38:11 · 6678 阅读 · 3 评论 -
nodejs 使用axios模块发起http请求,并进行拦截各种请求数据
1、安装axiosnpm install axios --save -g2、先写好拦截器、服务等新建一个名为http_server.js的文件// http_server.jsvar axios = require("axios")// 创建axios实例sconst service = axios.create({ baseURL: "http://127.0.0.1:8...原创 2018-11-25 13:43:30 · 11537 阅读 · 2 评论 -
vue 集成bootstrap使用
1、编辑webpack.base.conf.js文件增加webpack:var webpack = require('webpack')增加Jquery:plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],修改后的文件:'use strict'...原创 2018-11-27 10:28:52 · 2334 阅读 · 0 评论 -
vue 验证码界面 点击后标灰并设置div按钮不可点击状态
1、先看看效果图未点击获取验证码的按钮状态点击后的不可点击状态2、代码实现<template> <div class="my-code"> <input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captch原创 2018-12-13 09:07:20 · 18907 阅读 · 6 评论 -
vue 中定时器的使用全解
1、vue使用定时器在vue中使用定时器,很多情况下,进入和退出vue界面,都没有清除定时器,从而导致有很多定时器一起工作,这样肯定是不行的,接下来就使用当用户进入界面时启用定时器,当用户离开当前界面时就清除定时器。2、代码实现<template></template><script> import store from '@/store'...原创 2018-12-13 09:15:22 · 30808 阅读 · 1 评论 -
vue jq实现鼠标拖动
<template> <div class="icontent"> <div class="my-gaofen-tab-content"> <div class="my-gaofen-tab"> <ul id="pic">原创 2018-12-18 14:58:30 · 920 阅读 · 0 评论 -
vue 使用swiper轮播图,自动轮播时鼠标移入暂停,鼠标移出再次播放,并给出多个轮播的处理方法以及后台获取数据时无法循环轮播解决方案
1、安装 vue-awesome-swiper使用vue开发界面时,很多时候需要用到轮播图,有的时候需要在一个页面中使用多个轮播图,这个时候就需要用到单独的,鼠标移入暂停自动轮播,鼠标移出再次自动轮播。npm install vue-awesome-swiper2、代码部分<template> <div class="icontent"> ...原创 2019-01-11 10:04:34 · 14828 阅读 · 11 评论 -
vue 使用tinymce富文本编辑器,以及前后端富文本内容存储&展示处理方法推荐
1、安装相关插件npm install tinymce1、为什么安装这个?因为@tinymce/tinymce-vue是收费版本,需要key才能使用,所以我们需要使用 tinymce 封装一个来自己使用。2、安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下3、tinymce 默认是英文界面,所以还需要下...原创 2019-01-11 10:34:25 · 19190 阅读 · 9 评论 -
vue兼容IE 360
vue2.x 兼容IE 3601. 解决不显示内容在 index.html 添加下面内容<meta http-equiv="X-UA-Compatible" content="IE=edge">2. 语法不支持如果出现语法不支持,那么使用 babel-polyfill 解决:下载安装 babel-polyfill :npm install babel-polyfill ...原创 2019-01-09 14:14:21 · 838 阅读 · 1 评论 -
关于H5的一些杂项记录
一、div内显示一行,超出部分用省略号显示white-space: nowrap;overflow: hidden;text-overflow: ellipsis;二、div内显示两行或三行,超出部分用省略号显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;(...原创 2019-02-25 10:46:05 · 210 阅读 · 0 评论 -
vue 使用element 对话框显示地图插件 首次加载不显示 解决方案
在element对话框中使用地图插件时,会出现首次不会加载成功,这时使用$nextTick初始化地图插件即可代码如下<template> <div class="app-container"> <el-row> <el-col :span="24"> <el-b...原创 2019-03-27 15:56:19 · 4487 阅读 · 3 评论 -
vue使用localStorage保存登录信息,适用于移动端、pc端
众所周知,vue可以用来开发移动端app,可以使用hbuilder将build好的vue打包成一个移动端app,但是用过之后就会发现,使用cookies或者session保存登录的token,在手机端无法保存,每次打开app依然提示登录。那么我们可以使用localStorage来保存登录信息就可以了,具体代码如下1、vuex stroe代码index.jsimport Vue from 'v...原创 2018-10-02 11:48:24 · 12476 阅读 · 1 评论 -
vue2.x集成 swiper轮播图详细教程
1、安装 vue-awesome-swipernpm install vue-awesome-swiper --save2、使用 vue-awesome-swiperhtml代码部分<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <sw...原创 2018-09-20 10:51:03 · 4154 阅读 · 0 评论 -
vue html jq 实现上传图片显示在页面上预览
1、html代码<img src="" alt="" id="myimg"><input type="file" name="fileToUpload" id="fileToUpload" @change='changeimage($event)'>注意这里面定义的方法changeimage2、script代码写在m原创 2018-09-03 17:15:28 · 6211 阅读 · 1 评论 -
Html+CSS三栏式伸缩布局
三栏式伸缩布局的Html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;disp原创 2017-12-21 14:07:20 · 5528 阅读 · 0 评论 -
前后端数据交互之通过JS实现将得到的数组通过Ajax传递到后端
通过JS实现将得到的数组通过Ajax传递到后端 <script> $(function(){ mydel.click(function () { var arr = [1,2,3,4,5]; $.ajax({ type: 'POST',原创 2017-12-21 14:23:38 · 6616 阅读 · 0 评论 -
js 字符串和日期对象之间的转换
var strTime=”2011-04-16”; //字符串日期格式 var date= new Date(Date.parse(strTime.replace(/-/g, “/”))); //转换成Data(); var month=date.getMonth()+1; //获取当前月份测试输出 var d = new Date(‘2018/7/1’) console.log(...原创 2018-07-23 16:14:06 · 8932 阅读 · 0 评论 -
js里面判断对象类型的方法
typeofconsole.log(typeof ‘123’) // 回打印string 推荐使用原创 2018-07-23 16:41:34 · 4517 阅读 · 0 评论 -
JavaScript中 时间字符串 日期字符串 和日期对象 时间对象之间的互转
日期字符串&时间字符串转换成date对象var new_date_str = '2017-07-07'.replace(/-/g, '/')var newdate = new Date(new_date_str)console.log(newdate)//可以输出对应的日期对象,注意传入字符串也可以是'2017-7-7'var new_time_str = '2017-07...原创 2018-07-26 17:21:28 · 8822 阅读 · 0 评论 -
分享一个相当实用的web页面随意拖拽的前端插件
插件地址原创 2018-08-26 13:07:17 · 31582 阅读 · 1 评论 -
vue 定制上传按钮的样式的两种方法
1、铜通过纯html css实现 html代码<div class="file-upload"> <div class="file-upload-text">Add 新增</div> <input name="upfile" class="file-upload-input" id="upfile&q原创 2018-09-04 09:18:45 · 11754 阅读 · 0 评论 -
纯css实现input获得焦点边框变色、div被点击变色
写的一个简单的vue登录界面 先来看看实现的效果:(这里按钮登录div被点击会变色) 然后来看看代码实现<template> <div class="icontent"> <div class="logincontent"> <h3>师生互动-登录</h3>原创 2018-08-30 14:58:11 · 41247 阅读 · 3 评论 -
vue 实现长按弹出删除框,并解决浏览器默认事件、取消冒泡事件
1、先来看看vue怎么取消默认浏览器事件的(1)vue取消冒泡事件<--! 将@click改为@click.stop即可 --><p @click.stop="test($event)">测试</p>(2)vue取消浏览器默认事件<p @click.prevent="test($event)">测试</p>原创 2018-09-05 11:17:32 · 10385 阅读 · 0 评论 -
Gitbook 使用入门
1、安装gitbook注意:前提是你已经安装好了node.js 会使用npm命令npm install gitbook-cli -g2、简单使用这个时候你就可以使用gitbook命令了 首先在你自己的目录下新建一个名为gitbook的目录(可以自定义名字) 然后使用命令gitbook init ./gitbook初始化后目录里面会多出两个md文档 然后在gitbo...原创 2018-09-08 16:02:02 · 4367 阅读 · 0 评论 -
vue 监听路由刷新跳转,根据是否登录设置路由规则
在vue项目中,一个可行的路由规则很重要,它决定着用户是否有权限进入的路由,已经某些路由在刷新时要跳转等等 这部分代码是使用vue全家桶之一的router完成的,下面看具体实例const whiteList = ['/login'] // 路由白名单,不需要登录的路由放在这里面router.beforeEach((to,from,next) => { // 监听路由刷新进行...原创 2018-09-08 16:08:14 · 6990 阅读 · 0 评论 -
vue 使用高德地图点击标记点以及经纬度转地理位置
1、在index.html这种引入高德地图<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=your key"></script> 2、在webpack.base.conf.js 代码最后面引入externals: { 'AMap': 'AMap...原创 2019-03-29 09:34:45 · 7569 阅读 · 0 评论