Skip to content

Instantly share code, notes, and snippets.

@337547038
337547038 / CSS如何实现文字两端对齐
Created June 1, 2018 01:34
CSS如何实现文字两端对齐
在排版表单字段时,很多时间字数不一,如下:
用户名:
密码:
手机号码:
要实现前面的文字两端对齐,有个傻傻的办法就是在文字中间用空格隔开;
解决办是:
<div>用户名:</div>
css如下:
div{ text-align:justify; width:100px;}
div:after{ display:inline-block;width:100%;content:""}
@337547038
337547038 / 手机页面获取屏幕高度问题
Last active April 24, 2018 10:03
手机页面获取屏幕高度问题
在做移动端页面的时候,经常会遇到需要获取屏幕的高度和宽度,进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果,
这种就需要页面加载时获取到屏幕的高度。
在pc页面时,当一个页面在最底部时,滚动条的位置=文档的高度-窗口的高度。jquery取这三个属性的高度为:
var scrollTop=$(window).scrollTop();//滚动条
var documentHeight=$(document).height();//文档
var windowHeight=$(window).height();//窗口
即 scrollTop=documentHeight-windowHeight;条件为真时表示页面滚动到了底部,scrollTop值从0开始,但不会大于documentHeight-windowHeight
但在移动端部分浏览器并非如此,例如安卓UC浏览器(带工具条),滚动条在底部时documentHeight-windowHeight>scrollTop,比滚动条还要大50px左右,
也就是相等不会成立,没办法判断是否到了底部。这是因为获取到的高度解析不一样,解决办法为使用window.innerHeight取高度,当到达底部时使得上面等式成立
@337547038
337547038 / js获取滚动条的宽度
Created April 23, 2018 09:50
js获取滚动条的宽度
判断滚动条的需求在弹窗插件中使用比较多,当弹窗添加overflow: hidden时,如果页面比较长的话,添加这个属性之后页面会有晃动。
为了增强用户体验,通过判断是否有滚动条而添加 margin-left 属性以抵消 overflow: hidden 之后的滚动条位置。
判断是否有滚动条的方法
function hasScrollbar() {
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}
计算滚动条宽度的方法
新建一个带有滚动条的 div 元素,通过该元素的 offsetWidth 和 clientWidth 的差值即可获得
@337547038
337547038 / js获取dom元素的高度数值不精确
Last active April 13, 2018 05:55
js获取dom元素的高度数值不精确
页面使用rem布局,dom元素的宽高会有浮点数的情况,如110.32px。获取元素高度时使用jq的height及offsetHeight函数取到的数值都是整数,如110px。
例如在一些滚动效果上,滚动的单位数越大则误差越大,如110*10=1100px,实际应该是110.32*10=1103.2,解决的办法:
var obj = document.getElementById('demo');
var oStyle = obj.currentStyle?obj.currentStyle:window.getComputedStyle(obj, null);
var height = parseFloat(oStyle.height);
currentStyle这个是针对IE浏览器的
@337547038
337547038 / Vue中v-model无法动态更新对象数组问题数据
Created March 29, 2018 07:15
Vue中v-model无法动态更新对象数组数据问题
大致代码如下:
<input type='text' v-model='value'>{{value}}
data(){
return {
value:['1','2']
}
},
methods:{
test(){
this.value[0]='3';
@337547038
337547038 / 获取隐藏元素的宽高
Last active March 28, 2018 14:45
获取隐藏元素的宽高
/**
* 获取隐藏元素的宽高
* @param {Object} obj
*/
function getDomWidthOrHeight(widthOrHeight,obj){
//console.log(widthOrHeight+"="+obj);
var clone=obj.cloneNode(true);
clone.style.display="block";
clone.style.position="absolute";
@337547038
337547038 / 获取浏览器URL参数
Created March 12, 2018 06:41
获取浏览器URL参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return r[2];
}
else {
return "";
}
}
@337547038
337547038 / calendar日期插件
Created March 6, 2018 07:44
calendar日期插件
;(function ($) {
$.fn.extend({
calendar: function (opt) {
opt = jQuery.extend({
year: "",
month: "",
date: "",
//prevClick: "",
// nextClick: "",
dayClick: ""
1、npm install --save-dev sass-loader node-sass
2、build/webpack.base.conf.js添加loader;
   {
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}
3、在App.vue里引入;
  <style lang="scss">
  @import "sass/index.scss";
  </style>
@337547038
337547038 / jquery图片垂直水平居中
Created November 24, 2017 03:29
jquery图片垂直水平居中
;(function ($) {
$.fn.extend({
imgHook: function (opt) {
opt = jQuery.extend({className: "img-hook"}, opt);
var th = $(this);
if (th.length > 0) {
if (th[0].tagName == 'IMG') {
th.wrap('<div class="' + opt.className + '"></div>');
th.before('<b class="hook"></b>')
} else {