常用的Javascript

1. 时间判断

 <script type="text/javascript">
  $(".btn-primary").on("click",function () {    
      var startTime = $('#start_time').val();
      var endTime = $('#end_time').val(); 
      start = new Date(startTime.replace("-", "/").replace("-", "/"));
      end = new Date(endTime.replace("-", "/").replace("-", "/"));
       if (end < start) { 
         $.alert(
           {    title : "提示信息",
                content: "结束时间小于开始时间,请重新选择！"
            }
        );
         return false;
       }
       if((startTime && !endTime)||(!startTime && endTime)){
           $.alert(
                {    title : "提示信息",
                     content: "结束时间和开始时间不能只填一个"
                }
          );
         return false;
       }
  })
  </script>

2. 拒绝的确认框–可用模态框代替
   导入jquery-confirm.min.css和jquery-confirm.min.js

// 拒绝的确认框
 function passconfirm(url) {
    $.confirm({
        title: '是否拒绝申请!',
        content: '<span style="position: relative;top: -54px;">备注：</span><textarea name="messege" id="messege" style="width:256px;height:66px;word-break:break-all; word-wrap:break-word;" ></textarea>',
        icon: 'fa fa-question-circle',
        columnClass: 'small',
        buttons: {
            'confirm': {
                text: '确定',
                btnClass: 'btn-info',
                action: function () {
                var messege = $('#messege').val();
                var url1 = url+'&messege='+messege;
                    $.get(url1,function(data){   
                         window.location.reload();
                    });
                }
            },
            'cancel': {
                text: '取消',
                action: function () {

                }
            },
        }
    });
}  

3. jQuery的get和post

Get

var cashId = $("#cashId").val();  
   var start = $('#start').val();   
   var type = $('#type').val();
   var url = '/memberManager/withdrawal?cashId='+cashId+'&start='+start+'&type='+type;
   
   $.get(url,function(data){
        $('#myModal').modal('hide');       
        $('#tongguo').hide();       
        $("#jujue").hide();  
        location.href = '/memberManager/withdrawal';
   });

Post

 $.ajax({
        url: '/package/status',
        type: 'post',
        dataType: 'text',
        data: "package_id="+package_id+"&status="+status,
        success: function (data) {
            $(obj).parent().html(data);
        }
});
$.post('/myInfo/saveMemberInfo',{id:id,memberWX:memberWX},function(data){
           
                var obj = JSON.parse(data);
            //var data = obj.data;
                if(obj.status == 1)
                {
                     $.alert({title : "提示信息", content: '修改成功' });
                }
                else
                {
                    $.alert({title : "提示信息", content: obj.message });
                }
            }
        )

4. 表单

• 4.1 验证—手机号码

if(!(/^1[3456789]\d{9}$/.test(phoneNumber))){
       $.alert({title : "提示信息", content: '手机号码有误，请重填' });
       return ;
}

Main.js
//判断是否为空
function isEmpty(value){
    if(value == null || value == "" || value == "undefined" || value == undefined || value == "null" || value.length == 0){
        return true;
    }
    else{
        return false;
    }
}

• 4.2 checkbox判断选中

proValue = $("#editModel_"+id).attr('provalue');

$("input[name='proValue'] + label").each(function (index, item) {
            if(proValue.indexOf($(this).text()) !== -1){
                $('#proValue'+ index).prop("checked",true);
            }
        });
        
Html
<?php foreach ($groundList as $k => $value){?>
    <input type="checkbox" name="proValue" id="proValue<?= $k?>" value="<?= $value['id']?>"/> 
    <label for="proValue<?= $k?>"><?= $value['attributeName']?></label>&emsp;
          <?= (($k+1)%5 == 0)?'<br/>':''?>
    <?php }?>

获取选中的值
第一种

str = "";
    $("input[name='proValue']:checked").each(function (index, item) {
        if ($("input[name='proValue']:checked").length-1==index) {
            str += $(this).val();
        } else {
            str += $(this).val() + ",";
        }  
    });

第二种

		var myCheckboxes = new Array();
        $("input:checked").each(function() {
           myCheckboxes.push($(this).val());
        });

• 4.3 提交图片

var formData = new FormData();  //创建一个forData 
//    formData.append('img', $('#picID')[0].files[0]); //把file添加进去  name命名为img
    formData.append('id',$("#proId").val());
//    formData.append('oldImg',$('#picImg .fileinput-new>img').attr('src'));

    $.ajax({
        data: formData,
        async:false,
        contentType : false,
        processData : false,
        type: 'post',
        dataType: 'json',
success: function (data) {
            $(obj).val('提交');
            $(obj).removeAttr("disabled");
            if (data.status == 2) {
                $.alert({
                    title: '错误提示：',
                    type: 'red',
                    content: data.message,
                    columnClass: 'small',
                });
            } else {
                if(typeof(data.tiaourl)!="undefined"){ 
                    location.href = data.tiaourl;
                }else{
                    location.href = successurl;
                }
            }
        }
    });

5. js弹出提示信息并自动关闭

<script language="JavaScript">  
//contetn为要显示的内容  
//height为离窗口顶部的距离  
//time为多少秒后关闭的时间，单位为秒  
function showTips( content, height, time ){  
    //窗口的宽度  
  var windowWidth  = $(window).width();  
  var tipsDiv = '<div class="tipsClass">' + content + '</div>';  
   
  $( 'body' ).append( tipsDiv );  
  $( 'div.tipsClass' ).css({  
      'top'       : height + 'px',  
      'left'      : ( windowWidth / 2 ) - 350/2 + 'px',  
      'position'  : 'absolute',  
      'padding'   : '3px 5px',  
      'background': '#8FBC8F',  
      'font-size' : 12 + 'px',  
      'margin'    : '0 auto',  
      'text-align': 'center',  
      'width'     : '350px',  
      'height'    : 'auto',  
      'color'     : '#fff',  
      'opacity'   : '0.8'  
  }).show();  
  setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );  
}  
  //调用该方法时：
   showTips(response.msg,200,5);
  </script>

6. 获取当前点击的位置

		var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.clientX + scrollX;
        var y = e.clientY + scrollY;

7. 兼容大多数浏览器的弹窗

<script src="/static/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/jquery-confirm/jquery-confirm.min.js" type="text/javascript"></script>
<script src="/static/layui/layui.js" type="text/javascript"></script>
<script type="text/javascript">
    //可以接受错误信息并弹出窗口
    function delconfirmAlert(url,actionurl) {
        layui.use(['layer'], function(){
        var layer = layui.layer; //弹层
        var $ = layui.$;

          layer.open({
              type: 1
              , title: '确认删除'
              , area: '170px'
//              , content: ''
              , btn: ['确认', '取消'] 
              , yes: function (index, layero) {
                  
                 $.get(url,function(obj,status){
                    var data = JSON.parse(obj);
                    if(data.status == '1'){
                       location.href = actionurl;
                    }else{
                        $.alert({
                            title: '错误提示：',
                            type: 'red',
                            content: data.message,
                            columnClass: 'small',
                        });
                    }
                });  
                
              }
              , cancel : function () {

              }
              , btn2: function () {
                  layer.closeAll();
              }
          });
          
      });
    }
 </script>

8. confirm的参数

$.confirm({
        title: '删除确认!',
        content: '您确定要删除吗?',
        animation: 'opacty',//打开对话框时的动画效果。
        //可选值有： right, left, bottom, top, rotate, none, opacity, scale, zoom, scaleY, 
        //scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)
        animationSpeed: 500,//动画的持续时间（毫秒）
        backgroundDismiss: true,//是否允许点击对话框之外的区域来关闭对话框
        icon: 'fa fa-question-circle',
        columnClass: 'small',
		content: function () {
			var self = this;
			return $.ajax({
				url: '/tables/showqrcode',
				data: 'tables_id=' + tables_id,
				dataType: 'json',
				method: 'get'
			}).done(function (response) {
				self.setContent(response.content);
				
			}).fail(function(){
				self.setContent('信息加载错误,请重试！');
			});
		},
		buttons: {
			confirm: {
				text: '确定',
				btnClass: 'btn-primary',
				action: function(){

				}
			}
		}

	});

9. 复制内容

function copyTextLink()
    {
        const range = document.createRange();
        range.selectNode(document.getElementById('promotionLink'));
        const selection = window.getSelection();
        if (selection.rangeCount > 0)
            selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        alert("复制成功！");
    }


        <div class="container">
            <div id="linkcontent">
                <?php 
                foreach($shareVideos as $value)
                {
                    echo '<div class="item">';
                    echo '<p>'.$value[2].'</p>';
                    echo '<p><a href="'.$value[4].'">'.$value[4].'</a></p>';
                    echo '</div>';
                }
                ?>
            </div>
            <div class="item">
                <p>
                    <span class="tuiguang" onclick="copyTextLink()">复制推广链接</span>
                </p>
            </div>
        </div>