SVG九宮格密碼效果程式碼

螞蟻小編發表於2018-05-20
SVG密碼
分享一段程式碼例項，它利用九宮格實現了滑動輸入密碼效果。

這種功能在手機上比較常見，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0;
 padding:0;
}
body{
  background-color:#454545;
}
.nineSvg{
  width:400px;
 height:400px;
 margin:200px auto 0;
  display:block;
 box-shadow:0 0 20px 2px rgba(0,0,0,0.5);
 /*color:transparent;*/
}
p{
 margin-top:30px;
 text-align:center;
 color:#fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
  //svg的
  function doSvg() {
    var $that = $("#nineSvg"), //jquery物件
      that = $that[0], //原始物件
      number = 9, //格子的個數
      canLine = false,
      thisL = '', //d的值
      thisPass = [], //畫出的密碼
      canDoLine = false, //是否在元素上
      passWord = 742569, //設定的密碼
      a;
 
    //畫入9宮格子
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 3; j++) {
        var node = $(document.createElementNS("http://www.w3.org/2000/svg", "circle")).attr({
          'cx': 110 * j + 90,
          'cy': 110 * i + 90,
          'r': 40,
          'stroke': 'rgba(255,255,255,0.5)',
          'stroke-width': 2,
          'fill': 'transparent',
          'class': 'roundA',
          'canDo': true
 
        });
        $that.append(node);
      }
    }
    //畫入線段
    var DoLine = $(document.createElementNS("http://www.w3.org/2000/svg", "path")).attr({
      'stroke': '#fff',
      'stroke-width': 2,
      'fill': 'transparent',
      'd': ' '
    });
    $that.append(DoLine);
    //獲取九宮格
    var circle = $that.find('circle');
    //在格子上按下
    circle.mousedown(function() {
      //可以畫線
      canLine = true;
      var Mx = $(this).attr("cx"),
        My = $(this).attr("cy");
      //初始化原點
      thisL = 'M' + Mx + ' ' + My;
    });
    //在物件上移動
    $that.mousemove(function(e) {
 
      if (canLine) {
        var NowLin = DoLine.attr('d');
        DoLine.attr({
          'd': thisL + 'L' + e.offsetX + ' ' + e.offsetY
        });
      }
 
    });
 
    // 如果移動的時候進入了圓格子
    circle.mousemove(function() {
      if (canLine && $(this).attr('canDo') == 'true') {
        var X = $(this).attr("cx"),
          Y = $(this).attr("cy");
        thisL = thisL + ' L' + X + ' ' + Y;
        // 加標記
        markRound($(this));
        // 改變軌跡
        DoLine.attr({
          'd': thisL
        });
        // 記錄密碼
        thisPass.push($(this).index() + 1);
        // 標記不可選
        $(this).attr('canDo', false);
        //標記滑鼠在元素上
        canDoLine = true;
      }
    });
    //滑鼠已經離開了元素的時候做標記
    circle.mouseout(function() {
      canDoLine = false;
    });
    //滑鼠抬起
    $that.mouseup(function() {
      var nowPassword = removeSameArr(thisPass).join(''); //密碼
      // 清空密碼陣列
      thisPass = [];
      console.log(nowPassword)
        //如果不元素上,去除後兩項
      if (!canDoLine) {
        DoLine.attr({
          'd': thisL
        });
      }
      //判斷密碼是否正確
      if (passWord == nowPassword) {
        alert('密碼正確');
      } else {
        alert('密碼錯誤');
      }
      //標記不可劃線
      canLine = false;
      // 清楚樣式
      $(that).find('.roundB').remove();
      $(that).find('.roundA').attr({
        'fill': 'transparent',
        'canDo': true,
        'stroke': 'rgba(255,255,255,0.5)'
      });
      DoLine.attr('d', '');
 
    });
    //去除相同的元素
    function removeSameArr(arr) {
      var thisArr = [];
 
      for (var i = 0; i < arr.length; i++) {
        if (thisArr.indexOf(arr<i>) == -1) thisArr.push(arr<i>);
      }
      return thisArr;
    }
    //標記選中的方法
    function markRound(obj) {
      var nowRound = obj,
        round = $(document.createElementNS("http://www.w3.org/2000/svg", "circle")).attr({
          'cx': nowRound.attr('cx'),
          'cy': nowRound.attr('cy'),
          'r': 20,
          'fill': '#fff',
          'class': 'roundB'
        });
      $that.append(round);
      nowRound.attr({
        'stroke': '#fff',
        'fill': 'rgba(0,0,0,0.3)'
      });
    }
  }
  doSvg()
});
</script>
</head>
<body>
<svg class="nineSvg" id="nineSvg"></svg>
<p>正確密碼:742569</p>
</body>
</html>

相關文章