js经纬度换算距离

2021-09-20

一、距离换算两个经纬度没有先后顺序，都可以

function Rad(d) {
  return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
}

//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
export function GetDistance(lat1, lng1, lat2, lng2) {
  var radLat1 = Rad(lat1);
  var radLat2 = Rad(lat2);
  var a = radLat1 - radLat2;
  var b = Rad(lng1) - Rad(lng2);
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  s = s * 6378.137;// EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000; //输出为公里
  s = s.toFixed(2);
  if (s > 1) {
    s = s + 'km'
  } else if (s < 1) {
    s = s * 1000 + 'm'
  }
  return s;
}

展开全文 >>

小程序开发总结

2021-09-20

待完善

展开全文 >>

Typescript开发总结

2021-09-20

待完善

展开全文 >>

NODE开发总结

2021-09-20

待完善

展开全文 >>

js获取当前时间,js时间函数

2021-09-20

一、Js获取当前日期时间及其它操作，js时间函数

var myDate = new Date();
    myDate.getYear(); //获取当前年份(2位)
    myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    myDate.getMonth(); //获取当前月份(0-11,0代表1月)
    myDate.getDate(); //获取当前日(1-31)
    myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours(); //获取当前小时数(0-23)
    myDate.getMinutes(); //获取当前分钟数(0-59)
    myDate.getSeconds(); //获取当前秒数(0-59)
    myDate.getMilliseconds(); //获取当前毫秒数(0-999)
    myDate.toLocaleDateString(); //获取当前日期
    var mytime=myDate.toLocaleTimeString(); //获取当前时间
    myDate.toLocaleString( ); //获取日期与时间

日期时间脚本库方法列表

Date.prototype.isLeapYear 判断闰年
Date.prototype.Format 日期格式化
Date.prototype.DateAdd 日期计算
Date.prototype.DateDiff 比较日期差
Date.prototype.toString 日期转字符串
Date.prototype.toArray 日期分割为数组
Date.prototype.DatePart 取日期的部分信息
Date.prototype.MaxDayOfDate 取日期所在月的最大天数
Date.prototype.WeekNumOfYear 判断日期所在年的第几周
StringToDate 字符串转日期型
IsValidDate 验证日期有效性
CheckDateTime 完整日期时间检查
daysBetween 日期天数差

方法

//—————————————————
// 判断闰年
//—————————————————
Date.prototype.isLeapYear = function()
{
return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));
}
 
//—————————————————
// 日期格式化
// 格式 YYYY/yyyy/YY/yy 表示年份
// MM/M 月份
// W/w 星期
// dd/DD/d/D 日期
// hh/HH/h/H 时间
// mm/m 分钟
// ss/SS/s/S 秒
//—————————————————
Date.prototype.Format = function(formatStr)
{
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
 
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():’0′ + (this.getYear() % 100));
 
str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():’0′ + this.getMonth());
str=str.replace(/M/g,this.getMonth());
 
str=str.replace(/w|W/g,Week[this.getDay()]);
 
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():’0′ + this.getDate());
str=str.replace(/d|D/g,this.getDate());
 
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():’0′ + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():’0′ + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
 
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():’0′ + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
 
return str;
}
 
//+—————————————————
//| 求两个时间的天数差 日期格式为 YYYY-MM-dd
//+—————————————————
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf (‘-’));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf (‘-’)+1);
var OneYear = DateOne.substring(0,DateOne.indexOf (‘-’));
 
var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf (‘-’));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf (‘-’)+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf (‘-’));
 
var cha=((Date.parse(OneMonth+’/'+OneDay+’/'+OneYear)- Date.parse(TwoMonth+’/'+TwoDay+’/'+TwoYear))/86400000);
return Math.abs(cha);
}
 
//+—————————————————
//| 日期计算
//+—————————————————
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case ‘s’ :return new Date(Date.parse(dtTmp) + (1000 * Number));
case ‘n’ :return new Date(Date.parse(dtTmp) + (60000 * Number));
case ‘h’ :return new Date(Date.parse(dtTmp) + (3600000 * Number));
case ‘d’ :return new Date(Date.parse(dtTmp) + (86400000 * Number));
case ‘w’ :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
case ‘q’ :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case ‘m’ :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case ‘y’ :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
}
}
 
//+—————————————————
//| 比较日期差 dtEnd 格式为日期型或者有效日期格式字符串
//+—————————————————
Date.prototype.DateDiff = function(strInterval, dtEnd) {
var dtStart = this;
if (typeof dtEnd == ‘string’ )//如果是字符串转换为日期型
{
dtEnd = StringToDate(dtEnd);
}
switch (strInterval) {
case ‘s’ :return parseInt((dtEnd – dtStart) / 1000);
case ‘n’ :return parseInt((dtEnd – dtStart) / 60000);
case ‘h’ :return parseInt((dtEnd – dtStart) / 3600000);
case ‘d’ :return parseInt((dtEnd – dtStart) / 86400000);
case ‘w’ :return parseInt((dtEnd – dtStart) / (86400000 * 7));
case ‘m’ :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) – (dtStart.getMonth()+1);
case ‘y’ :return dtEnd.getFullYear() – dtStart.getFullYear();
}
}
 
//+—————————————————
//| 日期输出字符串，重载了系统的toString方法
//+—————————————————
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();
if (showWeek)
{
var Week = ['日','一','二','三','四','五','六'];
str += ‘ 星期’ + Week[myDate.getDay()];
}
return str;
}
 
//+—————————————————
//| 日期合法性验证
//| 格式为：YYYY-MM-DD或YYYY/MM/DD
//+—————————————————
function IsValidDate(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,”); //去两边空格;
if(sDate==”) return true;
//如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为”
//数据库中，合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式
var s = sDate.replace(/[\d]{ 4,4 }[\-/]{ 1 }[\d]{ 1,2 }[\-/]{ 1 }[\d]{ 1,2 }/g,”);
if (s==”) //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D
{
var t=new Date(sDate.replace(/\-/g,’/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())
{
//alert(‘错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。’);
return false;
}
}
else
{
//alert(‘错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。’);
return false;
}
return true;
}
 
//+—————————————————
//| 日期时间检查
//| 格式为：YYYY-MM-DD HH:MM:SS
//+—————————————————
function CheckDateTime(str)
{
var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/;
var r = str.match(reg);
if(r==null)return false;
r[2]=r[2]-1;
var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear()!=r[1])return false;
if(d.getMonth()!=r[2])return false;
if(d.getDate()!=r[3])return false;
if(d.getHours()!=r[4])return false;
if(d.getMinutes()!=r[5])return false;
if(d.getSeconds()!=r[6])return false;
return true;
}
 
//+—————————————————
//| 把日期分割成数组
//+—————————————————
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth();
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}
 
//+—————————————————
//| 取得日期数据信息
//| 参数 interval 表示数据类型
//| y 年 m月 d日 w星期 ww周 h时 n分 s秒
//+—————————————————
Date.prototype.DatePart = function(interval)
{
var myDate = this;
var partStr=”;
var Week = ['日','一','二','三','四','五','六'];
switch (interval)
{
case ‘y’ :partStr = myDate.getFullYear();break;
case ‘m’ :partStr = myDate.getMonth()+1;break;
case ‘d’ :partStr = myDate.getDate();break;
case ‘w’ :partStr = Week[myDate.getDay()];break;
case ‘ww’ :partStr = myDate.WeekNumOfYear();break;
case ‘h’ :partStr = myDate.getHours();break;
case ‘n’ :partStr = myDate.getMinutes();break;
case ‘s’ :partStr = myDate.getSeconds();break;
}
return partStr;
}
 
//+—————————————————
//| 取得当前日期所在月的最大天数
//+—————————————————
Date.prototype.MaxDayOfDate = function()
{
var myDate = this;
var ary = myDate.toArray();
var date1 = (new Date(ary[0],ary[1]+1,1));
var date2 = date1.dateAdd(1,’m',1);
var result = dateDiff(date1.Format(‘yyyy-MM-dd’),date2.Format(‘yyyy-MM-dd’));
return result;
}
 
//+—————————————————
//| 取得当前日期所在周是一年中的第几周
//+—————————————————
Date.prototype.WeekNumOfYear = function()
{
var myDate = this;
var ary = myDate.toArray();
var year = ary[0];
var month = ary[1]+1;
var day = ary[2];
document.write(‘< script language=VBScript\> \n’);
document.write(‘myDate = Datue(”+month+’-'+day+’-'+year+”) \n’);
document.write(‘result = DatePart(‘ww’, myDate) \n’);
document.write(‘ \n’);
return result;
}
 
//+—————————————————
//| 字符串转成日期类型
//| 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
//+—————————————————
function StringToDate(DateStr)
{
 
var converted = Date.parse(DateStr);
var myDate = new Date(converted);
if (isNaN(myDate))
{
//var delimCahar = DateStr.indexOf(‘/’)!=-1?’/':’-';
var arys= DateStr.split(‘-’);
myDate = new Date(arys[0],–arys[1],arys[2]);
}
return myDate;
}
 
若要显示:当前日期加时间(如:2009-06-12 12:00)
 
function CurentTime()
{
var now = new Date();
 
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
 
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
 
var clock = year + “-”;
 
if(month < 10)
clock += “0″;
 
clock += month + “-”;
 
if(day < 10)
clock += “0″;
 
clock += day + ” “;
 
if(hh < 10)
clock += “0″;
 
clock += hh + “:”;
if (mm < 10) clock += ’0′;
clock += mm;
return(clock);
}

展开全文 >>

Js找出数组中的共同项

2021-09-20

一、Js找出数组中的共同项

FilterData(a, b) {
      //循环判断数组a里的元素在b里面有没有，有的话就放入新建立的数组中
      var result = new Array();
      var c = b.toString();
      for (var i = 0; i < a.length; i++) {
        if (c.indexOf(a[i].cityCodeId.toString()) > -1) {
          result.push({
            cityCodeId: a[i].cityCodeId,
            cityProId: a[i].cityProId,
          });
        }
      }
      return result;
    }

展开全文 >>

ES6 数组some()和every()使用

2021-09-20

some 英语翻译为一些,every翻译为所有,每个，所以some方法只要其中一个为true 就会返回true的，相反，every（）方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；every（）和 some（）目的：确定数组的所有成员是否满足指定的测试

every:一假即假
some:一真即真

/** 
 * 计算对象数组中每个电脑的扣件系统是否可用,大于16位操作系统表示可用,否则不可用
*/
var computers = [
    {name:"Apple",ram:8},
    {name:"IBM",ram:4},
    {name:"Acer",ram:32},
];
 var result= computers.every(function(computer){
   return computer.ram > 16
})
console.log(result)//false;
var some = computers.some(function(computer){
   return computer.ram > 16
})
console.log(some)//true;

展开全文 >>

CSS文本处理方法

2021-09-19

CSS开发中的经验总结

一、文本换行总结

强制英文单词断行

1
2
3

div{
   word-break:break-all;
}

自动换行


div{
    word-wrap: break-word;
    word-break: normal;
}

强制不换行


div{
    white-space:nowrap;
}

二、文字间距设置

1	h1 {letter-spacing:2px}

三、文字缩进,首行缩进

1
2
3

p{
  text-indent:50px;
  }

四、文字两端对齐

<div class="justify-text">
 <div class="li">账号</div>
 <div class="li">密码</div>
 <div class="li">电子邮件</div>
</div>
.justify-text {
 .li {
    padding: 0 20px;
    margin-top: 10px;
    width: 100px;
    background-color: #f13f84;
    line-height: 40px;
    text-align-last: justify;
    color: #fff;
    list-style: none;
    &:first-child {
    margin-top: 0;
    }
 }
}

五、文字的排版方向

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列

sideways-lr：内容垂直方向从下到上排列


<div class="bruce flex-ct-x">
 <div class="vertical-text">
  <h3>诗经</h3>
  <p>
 死生契阔，<br>
 与子成说。<br>
 执子之手，<br>
 与子偕老。
 </p>
 </div>
</div>
.vertical-text {
 writing-mode: vertical-rl; // 文字排版方向
 h3 {
  padding-left: 10px;
  font-weight: bold;
  font-size: 18px;
  color: #d60f5c;
 }
 p {
  line-height: 30px; // 行间距
 letter-spacing: 7px; // 文字间距
  color: #ee1166;
 }
}

展开全文 >>

CSS居中方法总结

2021-09-19

CSS开发中的经验总结

css定位translate 方法

center {
    position: relative;
    height: 500px;
    }
        .center_text{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 600px;
        }

展开全文 >>

CSS开发小技巧

2021-09-18

CSS开发中的经验总结

一、超出隐藏

一行显示，超出…

1
2
3

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

两行显示，超出…

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

二、画各种三角形

画三角形参考内容

向上三角形

  #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

向下三角形

 #triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

向左三角形

  #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

向右三角形

 #triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

三、九宫格画法

flex布局+css3

原理：flex布局和css3计算属性

<style>
*{
 margin: 0;
 padding: 0;
}
.blockDiv{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
.block{
    width: calc(calc(100% / 3) - 10px);
    margin:5px;
    height:50px;
    box-sizing: border-box;
    border:1px  solid #000;
}
</style>
<body>
   <div class="blockDiv">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>

float写法

原理：margin负边距

关键点
1. 最外层的包裹元素等于：li宽度3+li右间距2
2. 如果li是右间距，则ul的margin-right为负的li间距值。
3. 父元素ul使用overflow:hidden;形成bfc，以清除浮动带来的影响（父元素塌陷）。
4. margin-bottom和margin-top的配合，是同right的理的，消除最后一排li撑开的底边距。
5. li要浮动。外边距方向和ul设置负值的外边距方向一致。

.box{
    width: 940px;
  }
  ul{
    overflow: hidden;
    margin-right: -20px;

    margin-bottom: -20px;
    margin-top: 0;
  }
  .box li{
    float: left;
    width: 300px;
    height: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }

展开全文 >>

一、距离换算 两个经纬度没有先后顺序，都可以

一、Js获取当前日期时间及其它操作，js时间函数

日期时间脚本库方法列表

方法

一、Js找出数组中的共同项

一 、文本换行总结

二 、文字间距设置

三 、文字缩进,首行缩进

四 、文字两端对齐

五 、文字的排版方向

css定位translate 方法

一、 超出隐藏

二、 画各种三角形

三、 九宫格画法

一、距离换算两个经纬度没有先后顺序，都可以

一、文本换行总结

二、文字间距设置

三、文字缩进,首行缩进

四、文字两端对齐

五、文字的排版方向

一、超出隐藏

二、画各种三角形

三、九宫格画法