前端中具体实现

目录

• 去除选中标签后默认颜色
• 键盘事件
• 进度条自动填充
• 图形旋转
• 图片加载过慢
• 屏幕进度条拖动
• 长按事件
• JS打印
• 判断扫码的客户端

去除选中标签后默认颜色

可能有用的方案

# 方案一,css
body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

# 方案二,js
document.onselectstart=new Function("return false");

# 方案三，css
*{outline:none;}

# 方案三
-webkit-appearance:none;
我一般用这个：
::-webkit-input-placeholder{color:#999;}
input[type="text"],input[type="password"]{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;}

# 方案四
-webkit-tap-highlight-color:rgba(0,0,0,0); 
-webkit-tap-highlight-color:rgba(255,255,255,255); 

键盘事件

keydown() 
# keydown事件会在键盘按下时触发. 
keyup() 
# keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 
keypress() 
# keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 

获取键盘上对应的ASCII码

$(document).keydown(function(event){ 
	console.log(event.keyCode); 
    alert(event.keyCode);
}); 

常用键对应的编码

0键值48..9键值57 
a键值97..z键值122
A键值65..Z键值90 
+键值43;-键值45
.键值46;退格8;
tab键值9;Enter键值13

回车触发按钮事件

$("body").keydown(function(event) {
     if (event.keyCode == 13) {
         $('#submit').click();
         //阻止默认事件
         event.preventDefault();
         // 阻止冒泡事件
         //event.stopPropagation();
         // 阻止默认和冒泡
         //return false;
         }
});
$('#submit').click(function(){
    alert("test")
})

进度条自动填充

html

<div id="process_container">
    <div id="timeline" ></div>
</div>

css

#process_container{
   258px;
  height: 2px;
  position: absolute;
  left: 56px;
  top: 458px;
  border: 1px solid #524C9C;
}

#timeline{
  background: #D740D5; 
  float: left;
  height: 100%;
  text-align:center;  
  line-height:150%; 
}

javascript

var playMusic = {
	// 开始播放
    startPlay: function(){
    playMusic.showBar()
}
	// 暂停播放
    stopPlay: function(){
    window.clearTimeout(this.SHOWBAR_TIME_OBJ);
}
    
SHOWBAR_TIME_OBJ:new Object(),
    // 显示进度条
    showBar: function(){
      if(parseFloat($("#timeline").css("width")) <  258){
        var tmpWidth = $("#timeline").css("width");
        $("#timeline").css("width", parseFloat(tmpWidth) + 258.0/32)
      }else{  
        $("#timeline").css("width",258);
        window.clearTimeout(this.SHOWBAR_TIME_OBJ); 
        // return; 
      } 
	//定时执行函数   				
	this.SHOWBAR_TIME_OBJ=window.setTimeout("playMusic.showBar()",1000); 
    }
}

图形旋转

html

<div id="play_card"><img src="../images/play/paly_card.png"></div>>

css

#play_card {
   240px;
  height: 240px;
  position: absolute;
  left: 63px;
  top: 105px;
}

javascript

var playMusic = function(){
	// 开始旋转
	startPlay: function(){
        this.setPlayCard(1)
	}
	// 停止旋转
	stopPlay: function(){
        this.setPlayCard(2)
	}
	// 播放盘状态
    PLAYCARD_TIME_OBJ: new Object(),
    setPlayCard: function(i,current=0){
      if(i == 1){
      current = current +10; 
      $("#play_card").css("transform", 'rotate('+ current%360 + 'deg');
      this.PLAYCARD_TIME_OBJ = window.setTimeout("playMusic.setPlayCard("+1+','+ current+")", 1000);
      }else if(i == 2){
        window.clearTimeout(this.PLAYCARD_TIME_OBJ);
      }
    },
}

图片加载过慢

方案一：将图片服务和应用服务分离

七牛服务器提供的压缩图片的方法
一般来讲，用户看到的文字、图片等都是由运营上传的，如果运营直接在后台上传了一张很大的图片，那么前端页面在加载的时候就会较慢，有可能图片会有明显的加载过程，这个时候，就需要我们对图片进行处理了，比如我们公司的logo图标，地址是：点击打开链接。尺寸是1024*1024，大小是80.7kb，但是我只是需要在微信分享链接中使用这个图片，根本不需要这么大尺寸的图片，那么就很有必要压缩一下了，比如在这个图片的链接地址后面添加参数：?imageView2/2/w/300，就能够把这张图片压缩到300*300，大小为28.9kb。这样这张图片的加载速度就会加快很多。

方案二：将图片压缩

判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。

或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。或者利用资源预加载（三个 HTML5 不常见特性简介）当用户还没打开的时候，就开始加载。

方案三：图片懒加载

jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。

使用方法

// 引用jquery和jquery.lazyload.js到你的页面
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

// html图片调用方法
// 为图片加入样式lazy  图片路径引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">

// js初始化lazyload并设置图片显示方式
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>
// 在图片中也可以不使用 class="lazy"，初始化时使用：
$("img").lazyload({effect: "fadeIn"});

参数设置

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

https://www.cnblogs.com/moqiutao/p/6959163.html

方案四：css Sprites

方案五：将图片压缩成base64格式来节约请求

将图片压缩成base64,随html或者css一起下载到浏览器,不需要额外的请求,这样就节约了请求

如果将图片转换成base64,实际上是变大了,并且浏览器在decode  base64编码的图片时需要耗费很多时间的,所以如果我们选择此种方案的话,最好选择一些小图片,不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64,针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时,浏览器直接将指令发到图形加速器而不需要开发者更多的干预,硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形.因此,我们可以使用canvas来渲染base64编码后的图片

屏幕进度条拖动

js

processBarControl:function(){
    const timeProgressWrapper = document.getElementById("time_processWrapper");
    const timeProgress = document.getElementById('time_process');
    const timeProgressBtn = document.getElementById('time_processBtn');
    const timeProgressWrapperWidth = timeProgressWrapper.offsetWidth;
    const volumeProgressWrapper = document.getElementById('volume_processWrapper');
    const volumeProgress = document.getElementById('volume_process');
    const volumeProgressBtn = document.getElementById('volume_processBtn');
    const volumeProgressWrapperHeight = volumeProgressWrapper.offsetHeight;
  
    let timeTouchPoint = 0;
    let timeBtnLeft = 0;
    let volumeTouchPoint = 0;
    let volumeBtnBottom = 0;
    /**
     * 时间轴触摸开始事件
     */
    timeProgressBtn.addEventListener('touchstart', e => {
        let timeTouch = e.touches[0]
        timeTouchPoint = timeTouch.clientX // 获取触摸的初始位置
        timeBtnLeft = parseInt(getComputedStyle(timeProgressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性
    })
    /**
     * 时间轴触摸移动事件
     */
    timeProgressBtn.addEventListener('touchmove', e => {
        e.preventDefault(); // 防止浏览器默认行为
        e.stopPropagation(); // 防止冒泡
        if(e.touches.length > 1) return; // 防止多点触控
        let timeTouch = e.touches[0];
  
        let timeDiffX = timeTouch.clientX - timeTouchPoint; // 通过当前位置与初始位置之差计算改变的距离
        let timeBtnLeftStyle = timeBtnLeft + timeDiffX ;// 为按钮定义新的left值
  
        if (timeBtnLeftStyle > timeProgressWrapperWidth) {
          timeBtnLeftStyle = timeProgressWrapperWidth
        } 
        else if (timeBtnLeftStyle < 0) {
            timeBtnLeftStyle = 0
        }
        window.event?window.event.cancelBubble=true:e.stopPropagation();
  
        timeTouch.target.style.left = timeBtnLeftStyle + 'px';
  
        let timePer = timeBtnLeftStyle / timeProgressWrapperWidth;
        Player.current = parseInt(timePer*Player.duration);
        Player.setCurrent(Player.current);
        timeProgress.style.width = timePer * 100 + '%'; // 通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
    })
    /**
     * 时间轴触摸离开事件
     */
    timeProgressBtn.addEventListener('touchend', e =>{
        alert(Player.current);
        noticeServerCodeAndValue("setMusicProgress",Player.current)
        window.event?window.event.cancelBubble=true:event.stopPropagation();
    })

jQuery

$('#webchat_scroller').on('touchstart',function(e) {
    var touch = e.originalEvent.targetTouches[0]; 
    var y = touch.pageY;
});
            
$('#webchat_scroller').on('touchmove',function(e) {
    e.preventDefault(); // 防止浏览器默认行为
    e.stopPropagation(); // 防止冒泡
    if(e.originalEvent.targetTouches.length > 1) return; // 防止多点触控
    var touch = e.originalEvent.targetTouches[0]; 
    var y = touch.pageY;
});

$('#webchat_scroller').on('touchend',function(e) {
    var touch = e.originalEvent.changedTouches[0]; 
    var y = touch.pageY;
});

长按事件

$("#stopRecord").on({
            touchstart: function(e){
                longClick=0;//设置初始为0
                timeOutEvent = setTimeout(function(){
                    //此处为长按事件
                    MeetingRecord.timeCountObj.shutdownTimer();
                    MeetingRecord.waitOkObj.startTimer();
                    $(".recordButton").css("display", "none");
                    $("#recordOver").css("display", "block"); 
                    longClick=1;//假如长按，则设置为1
                },500);
            },
            touchmove: function(){
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
                e.preventDefault();
            },
            touchend: function(e){
                clearTimeout(timeOutEvent);
                if(timeOutEvent!=0 && longClick==0){
                    //此处为点击事件
                    MeetingRecord.timeCountObj.shutdownTimer()
                    $(".recordButton").css("display", "none")
                    $("#continueRecord").css("display", "block");
                }
                return false;
            }
        });

JS打印

整体打印

<button id="print1">打印全部</button>
$('#print1').click(function(){
  window.print();
});

局部打印

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>局部打印案例</title>  
<script type="text/javascript">     
    function doPrint() {      
        bdhtml=window.document.body.innerHTML;      
        sprnstr="<!--startprint-->"; // 开始打印标识字符串有17个字符    
        eprnstr="<!--endprint-->"; // 结束打印标识字符串    
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); // 从开始打印标识之后的内容    
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); // 截取开始标识和结束标识之间的内容    
        window.document.body.innerHTML=prnhtml; // 把需要打印的指定内容赋给body.innerHTML 
        window.print(); // 调用浏览器的打印功能指定区域
  			window.document.body.innerHTML=bdhtml； // 还原页面
}      
</script>  
</head>  

<body>  
<p>1不需要打印的地方</p>  
<p>2这里不要打印啊</p>  
<!--startprint--><!--注意要加上html里star和end的这两个标记-->  
<h1>打印标题</h1>  
<p>打印内容</p>  
<!--endprint-->  
<button type="button" onclick="doPrint()">打印</button>  
<p>不打印的地方啊哈哈哈哈</p>  
<p>2</p>  
</body>  
</html>  

局部打印指定部分之外的内容

// 在打印前将指定部分隐藏，打印后再将指定的部分显示出来
$('#print3').click(function(){
    $('p').hide();
    window.print();
    $('p').show();
});

打印分页css，相当于分页符，总是在此div后分页

<div style="height:300px; page-break-after:always"></div>
// position 值为 relative 或 static 的非浮动块级元素。当时absolute的时候是不起作用的。

判断扫码的客户端

根据UserAgent中的关键字来判断，如果有 MicroMessenger 为微信，如果有 ApliPayClient 则为支付宝 。否则，不是这两家

function IsWeixinOrAlipay(){
    var ua = window.navigator.userAgent.toLowerCase();
    //判断是不是微信
    if ( ua.match(/MicroMessenger/i) == 'micromessenger' ) {  
        return "WeiXIN";  
    }    
    //判断是不是支付宝
    if (ua.match(/AlipayClient/i) == 'alipayclient') {
        return "Alipay";  
    }
    //哪个都不是
    return "false";