2. 程式人生 > >js手寫滑動驗證（相容pc和移動端）

js手寫滑動驗證（相容pc和移動端）

阿新 • • 發佈：2019-02-05 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
    <script src="assets/js/vue.min.js"></script>
    <script src="assets/js/jquery-1.12.4.min.js"
 
></script>
    <style>
        [v-cloak] {
            display: none;
        }
        *::-webkit-input-placeholder {
            color: #999;
            `ter-spacing: 2px;
        }
        *:-moz-placeholder {
            color: #999;
            letter-spacing: 2px;
        }
        *
 
:-ms-input-placeholder {
            color: #999;
            letter-spacing: 2px;
        }
        div, p, ul, li, html, body {
            padding: 0;
            margin: 0;
        }

        input {
            font-size: 15px;
            outline: none;
        }

        html {
            height
 
: 100%;
            width: 100%;
        }
        #app{
            height: 100%;
        }
        .header {
            height: 64px;
            width: 100%;
            line-height: 64px;
            text-align: center;
            background-color: #1b1920;
            position: relative;
        }

        .header span {
            font-size: 17px;
            color: rgb(255, 255, 255);
        }

        .content {
            border: 1px solid #000;
        }

        .content li {
            list-style: none;
        }

        .getmsg {
            height: 124px;
            width: 100%;
            background: url("assets/images/bg1.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .getmsg {
            position: relative;
        }

        .rex {
            position: absolute;
            top:25px;
            left:4%
        }

        .rex .rex_icon {
            height: 20px;
            border-left: 1px solid rgb(7,112,45);
            margin:0 10px 0 10px;
            display: inline-block;
        }
        .rex .title{
            color:rgb(1,131,56);
            font-size: 19px;
            font-weight: 500;
            letter-spacing: 1px;
            position: relative;
            bottom:4px;
            display: inline-block;
        }
        .getmsg .logo {
            width: 74px;
            height: 26px;
        }

        .getmsg .getmsg_input {
            width: 100%;
            position: absolute;
            bottom: 10px
}

        .input {
            padding-left: 12%;
            margin-left: 4%;
            background: rgb(255, 255, 255);
            width: 80%;
            border-radius: 10px 10px 0 0;
            background-image: url("assets/images/input.png");
            background-repeat: no-repeat;
            background-size: 15px 16px;
            background-position-x: 16px;
            background-position-y: 16px;
        }
        .input .enter{
            position: absolute;
            width: 60px;
            height: 28px;
            line-height: 28px;
            border-radius: 25px;
            border: none;
            outline: none;
            background: #43d280;
            color:#fff;
            font-size: 14px;
            letter-spacing: 1px;
            text-indent:1px;
            top:18%;
            right:7%
        }
        .getmsg_input input {
            height: 47px;
            border: none;
            width: 50%;
        }

        .getmsg_input .input span {
            color: rgb(51, 51, 51);
            margin-right: 25px
}

        .msgtips {
            border-radius: 10px;
            position: relative;
            width: 80%;
            margin-left: 4%;
            background: rgb(255, 255, 255);
            padding:6%
        }
        .msgtips .code{
            color:#f95959
}
        .msgtips img{
            position: absolute;
            top:-22px;
            width: 12px;
            height: 32px;
        }
        .msgtips .left{
            left:4%
        }
        .msgtips .right{
            right: 4%;
        }
        .msgtips .title{
            letter-spacing: 1px;
            font-size: 15px;
            color:rgb(100,102,100);
            font-weight: bold;
        }
        .msgtips p{
            margin-top: 12px;
            margin-bottom: 12px;
            height: 45px;
            line-height: 20px;
            font-size: 14px;
            color:rgb(123,123,123);
            letter-spacing: 1px;
        }
        .input_image {
            display: inline-block;
        }
        .msgcontent{
            background: -webkit-linear-gradient(#cdefda, #4ed487);
            background: -o-linear-gradient(#cdefda, #4ed487);
            background: -moz-linear-gradient(#cdefda, #4ed487);
            background: linear-gradient(#cdefda, #4ed487);
        }
        .msgform{
            width: 80%;
            margin-top:12px;
            margin-left: 4%;
            padding:6%;
            height: 360px;
            border-radius: 10px;
            background: rgb(255, 255, 255);
        }
        .msgform li{
            font-size: 14px;
            list-style: none;
        }
        .msgform li .title{
            width: 30%;
            color:rgb(123,123,123);
            letter-spacing: 1px;
        }
        .msgform li .formcontent{
            display: block;
            width: 70%;
            text-align: -webkit-right;
            color:rgb(93,93,93)
        }
        .msgcontent li{
            height: 45px;
            line-height: 45px;
            overflow: hidden;
            border-bottom:1px solid #f2f2f2;
        }
        .msgcontent .formcontent{
            display: inline-block;
            float: right;
        }
        .specialLH{
            line-height: initial;
        }
        #rex_card{
            width: 100%;
            height:100%;
            position: fixed;
            z-index: 9;
            background: rgba(0,0,0,0.3);
        }
        #rex_card .drawimg{
            height: 300px;
            margin: auto;
            padding-top: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            width: 340px;
        }
        #rex_card .draw_img{
            height: 300px;
            margin: 10px;
        }
        #rex_card .draw_img .puzzle p,#rex_card .draw_img .puzzle .puzzle_only{
            float: left;
            width: 19%;
            height:50px;
            background-color: #4a9ec3;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            color:#fff;
            border: 1px solid #fff;
        }
        #rex_card .draw_img .puzzle .puzzle_only{
            background-color: #4ad184;
            float: inherit;
            position: absolute;
            top:52px;
            left:0
}
        #rex_card .draw_img .puzzle{
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
            margin-left:4px;
        }
        #rex_card .puzzle_control{
            width:320px;
            text-align: center;
            position: relative;
            height: 40px;
            background-color: #dfe1e2;
            line-height: 40px;
            border:1px solid #e5e7e8;
            border-radius: 10px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        #rex_card .puzzle_control span{
            display: inline-block;
            color:#88949d;
        }
        #rex_card .puzzle_control .puzzle_btn{
            width:60px;
            height: 60px;
            border:1px solid #d7d7d7;
            outline: none;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            text-align: center;
            top:-10px;
            left: -8px;
        }
        #rex_card .puzzle_control .puzzle_btn:active{
            background-color: #eee;
        }
        #rex_card .puzzle_control .puzzle_btn span:first-child {
            margin-left: 4px;
        }
        #rex_card .puzzle_control .puzzle_btn span{
            margin-top: 18px;
            margin-right: 2px;
            height: 24px;
            display: inline-block;
            border-right: 4px solid #60c007;
        }
        #rex_card .puzzle .tips{
            position: absolute;
            bottom:-25px;
            padding: 2px;
            background-color: #de715b;
            color:#fff;
            width: 304px;
            left:1px;
            text-align: center;
            font-size: 15px;
        }
        #rex_card .puzzle .tips_right{
            position: absolute;
            bottom:-25px;
            padding: 2px;
            background-color: #4ad184;
            color:#fff;
            width: 304px;
            left:1px;
            text-align: center;
            font-size: 15px;

        }
        .flowlock{
            overflow-y:hidden;
        }
        .movebox{
            animation: move 0.3s;
        }
        .wrongbox{
            animation: wrong 2s;
        }
        @keyframes wrong {
            0% {
                bottom: -25px
}
            50% {
                bottom: 0;
            }
            100% {
                bottom: -25px;
            }
        }
        @-webkit-keyframes wrong
{
            0% {
                bottom: -25px
}
            50% {
                bottom: 0;
            }
            100% {
                bottom: 0;
            }
        }
        @keyframes move {
            0% {
                left: -10px
}
            25% {
                left: 10px;
            }
            50% {
                left: -10px;
            }
            100% {
                left: 10px;
            }
        }
        @-webkit-keyframes move
{
            0% {
                left: -10px
}
            25% {
                left: 10px;
            }
            50% {
                left: -10px;
            }
            100% {
                left: 10px;
            }
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div id="rex_card" v-show="btnRexShow">
        <div class="drawimg">
            <div class="draw_img">
                <div class="puzzle">
                    <p>南</p>
                    <p>京</p>
                    <p>天</p>
                    <p>脈</p>
                    <p>健</p>
                    <p>康</p>
                    <p>科</p>
                    <p>技</p>
                    <p style="background:rgba(0,0,0,0.5);">發</p>
                    <p>展</p>
                    <p>有</p>
                    <p>限</p>
                    <p>公</p>
                    <p>司</p>
                    <p>。</p>
                    <div class="puzzle_only" v-show="btnright">發</div>
                    <div class="tips">拖動滑塊將圖片正確拼合~</div>
                    <div class="tips_right">恭喜您驗證成功~</div>
                </div>
                <div class="puzzle_control">
                    <span>拖動左邊滑塊完成拼圖</span>
                    <p class="puzzle_btn" @mousedown="btnDragStart($event)" @touchstart="btnTochStart($event)">
                        <span></span>
                        <span></span>
                        <span></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="header">
        <span>南京天脈健康科技發展有限公司</span
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
js手寫滑動驗證（相容pc和移動端）

     
 
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=dev 



  
 

    


    
    
複製程式碼功能相容多種瀏覽器的通用程式碼測試通過（相容PC、手機端）

     
  
 
  2018-12-8 
 複製程式碼功能相容多種瀏覽器的通用程式碼測試通過（相容PC、手機端） 
 <!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF 



  
 

    


    
    
FlexSlider外掛的詳細設定引數（相容PC和移動的輪播圖）

     
 
                
$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "fade",              //圖片變換方式：淡入淡出或者滑動
  slideDirection: "horizon 



  
 

    


    
    
js面向物件思想封裝拖拽功能，相容pc和移動端

     
 
							
							
							我們在開發專案過程中，很可能會碰到頁面上某塊需要可以拖拽移動的功能需求，網上已經有不少前輩分享了相關功能的案例，外掛或者程式碼，但是考慮到專案功能需求，我們可能僅需要實現拖拽移動功能就可以，不需要其他功能，而網上很多外掛往往附帶了其他功能需求。這裡筆者僅對拖拽移 



  
 

    


    
    
控制容器文字行數（pc和 移動端）

     
 phone   行數   spa   pre   size   以及   :hover   框架   mx4   寫在前面的話：
　　對於文字的單行以及多行顯示，應該是經常用到的一個功能了，看下文吧~


 pc 端：

 　　1. 單行限制（兼容所有瀏覽器）   這裏加了一個 鼠標移入時顯示全部 的效果：
 



  
 

    


    
    
bootstrap響應式相容PC和移動端圖片無縫滾動效果demo

     
 
								
								            
							
							
							效果如圖所示： 




js程式碼部分：

/**
 * Created by Administrator on 2017/9/15.
 */

(function(){
    var firstD 



  
 

    


    
    
css，js手寫tab切換（pc）

     
  
 
 不論是swiper還是mui的tab切換都存在高度問題。想來想去還是自己寫 
  
 html 
             <div class="wrapper">
                <div class="main">
                    



  
 

    


    
    
phantomjs的使用+Java程式碼+依賴js（相容Linux和windows版本）

     
                 1、  在使用phantomjs的時候需要下載phantomjs，網上有window版本和Linux版本。將phantomjs放在Linux上的指定位置之後（如下面的/home/tpl/phantomjs-1.9.7-linux-x86_64/處），2、  按照類似如下命令進行 



  
 

    


    
    
偏前端-純css,手寫輪播-（焦點切換 和 自動輪播 只可選擇一種，兩者不可共存）

     
 set   abs   aci   count   right   container   是什麽   設置   網上   現在我們一般都是在網上找個輪播插件，各種功能應有盡有，是吧！！~大家似乎已經生疏了手寫是什麽感覺。萬一哪天想不起來，人家要手寫，就尷尬了！~~跟我一起復習一下吧
不多說：效果圖看一下：
 



  
 

    


    
    
js中常用的事件（pc端和移動端）

     
 
                1.點選事件：

在pc端是點選事件，但是在移動端是單擊事件，在移動端的專案中我們經常會區分單擊做什麼和雙擊做什麼，所以移動端的瀏覽器在識別click的時候，只有確定是單擊後才會把它執行，在移動端使用click會存在300ms的延遲:瀏覽器在第一次點選結束後，還需要等到300 



  
 

    


    
    
Mobiscroll的介紹【一款相容PC和移動裝置的滑動外掛】

     
 
								
								            
						
                  Mobiscroll是一個用於觸控裝置的日期和時間選擇器，它的使用不會改變HTML5、PhoneGap以及混合應用的原生使用者體驗。作為一款jQuery滑動選擇外掛，使用者可以自定義主題樣式，為自己 



  
 

    


    
    
PC和移動端判斷滑鼠（手指）滑動方向（touch方向）

     
 
								
								            
							
							
							//移動端
$(".demo").on("touchstart", function(e) {
　　　　e.preventDefault();
　　　　startX = e.originalEvent. 



  
 

    


    
    
手寫jwt驗證，實現java和node無縫切換

     
 前言
前端時間和我朋友寫了一個簡易使用者管理後臺,功能其實很簡單，涉及到的技術棧有：vue+elementUI，java+spring MVC以及node+egg，資料庫用的mysql，簡單方便。
一開始是我是隻負責前端，但是前端開發的的速度太快，老是沒事，加上他小子並沒有接觸過實戰的專案，又怕他出亂子，所以 



  
 

    


    
    
各主流瀏覽器（PC、移動端）userAgent屬性信息

     
 ble   信息   ie 8   瀏覽器版本   實用   link   row   inux   oppo   PC: IE、QQ、chrome、firefox、360、safair
移動端：微信內置瀏覽器、QQ、獵豹、百度、UC、2345、系統自帶
 
PC:
　　ie:　　
　　　　Mozilla/5 



  
 

    


    
    
Android系統下用js自定義gesture事件（仿ios實現移動端事件一致）

     
 initial   path   acc   mtab   uil   查看   sans   fault   default    




一、手勢事件
下面二維碼是一個實例dome，可掃碼直接查看:

在ios系統中，系統自帶了gesture事件，兩個手指操作的時候，就會產生一下三種手勢 



  
 

    


    
    
Nuxt.js asyncData方法獲取資料（await axios和 axios區別）

     
  
 
 
 在專案中需要在初始化頁面前先得到資料，也就是我們常說的非同步請求資料。Nuxt.js貼心的為我們擴充套件了Vue.js的方法，增加了asyncData(){……}。從名字上就很好理解，這是一個非同步的方法。 
 建立遠端資料 在這裡製作一些假的遠端資料，我選擇的網站是myjson.com，它是一 



  
 

    


    
    
TCP 滑動視窗（傳送視窗和接收視窗）

     
 
                
   TCP協議作為一個可靠的面向流的傳輸協議，其可靠性和流量控制由滑動視窗協議保證，而擁塞控制則由控制視窗結合一系列的控制演算法實現。一、滑動視窗協議     關於這部分自己不曉得怎麼敘述才好，因為理解的部分更多，下面就用自己的理解來介紹下TCP的精髓：滑動視窗協議。   



  
 

    


    
    
Node.js+Express構建Http服務（GET方式和POST方式）

     
 
                

Node.js

前提
環境：windows7下載地址：http://nodejs.org/download/
安裝

官網下載一個安裝檔案點選下一步安裝完成即可.

驗證安裝是否成功：node -v


 

基本HTTP伺服器

c:/http.js


Js程式碼  



  
 

    


    
    
使用Exchange服務實現跨平臺（PC+Web + 移動端）日曆的日程管理

     
 
							
							
							背景

  在做時間管理時，我們需要清空大腦，安排好自己的事情。無論是PC上亦或智慧手機上的“日曆”無疑是一個很好用的工具。

同步服務

 


Exchange Activesync

  首先需要明確的是，Exchange ActiveSync 是一種 M 



  
 

    


    
    
產品設計 使用者體驗優化之相容PC與移動端的回車搜尋響應事件設計

     
 
                
【文章特色：本文從使用者體驗的角度出發，分各種情況包括PC和移動web端的相容性講解了“回車提交”的處理情況】
一、為什麼要回車提交
在輸入搜尋關鍵字後我們很自然地敲擊回車鍵，或者在手機端點選軟鍵盤的搜尋鍵，而不是再去點選輸入框後面的搜尋按鈕。
使用鍵盤迴車響應事件的好處在