@Ottawa

整个网页，每隔60秒用ajax call 从后台获取实际的签名数字，自己用这个url试https://vote.huanqiu.com/api/v1/num。

它那个动画数字只是为了吸引眼球用的，一段时间就会用ajax call从后台更新实际的数据，

网站更新数据和submit 签名都是asynchronous，它提到是fingerprint防止多次签名，但是实际上非常容易就可以实现多次签名，但是网站的block IP技术还是有些水平的，总之，从网站的设计上看并不能发现作弊，当然后台的数据，就没人知道了

// var fgId = '7okx3d4yk2';
// var is_sign = 'is_sign_' + fgId;
// var language1 = 'language_' + fgId;

var u = navigator.userAgent;
var iswindows = (u.indexOf("Windows",0) != -1)?1:0;  
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
if(iswindows || isAndroid){
  // $('#clock .time-container .num').css('line-height', '1.2266666666666666rem');
}
// 中英文
renders(language);
function renders(t){
  document.title = languageText[t].headTile;
  $('.numberOf').text(languageText[t].signNum);
  $('.titSmall').html(languageText[t].titSmall);
  $('.slide1 h5').html(languageText[t].tit1);
  $('.slide1 .conts p').html(languageText[t].content1);
  $('.slide2 h5').html(languageText[t].tit2);
  $('.slide2 .conts p').html(languageText[t].content2);
  $('.conts span.packUp').text(languageText[t].packUp);
  $('.foot p').text(languageText[t].footText);
  $('.language').text(languageText[t].btnText);
  
  $('.switch').css('opacity',1);
  $('body,html').animate({ scrollTop: 0 }, 100);;
  isSlide = false;
  messageOut1();
  // 需要重新获取投票数
  getInfo();
  // 初始每分钟获取数据
  perMinutes();
  // 初始化按钮
  // initSignBtn();
}

var isClick;
// 验证本地存的local是否有效
initFingerprintJS(verifyRequest);
var visitorId = '80017177de1cb67cf66ae6c5f1e00008';
function initFingerprintJS(verifyRequest) {
  var fpPromise = FingerprintJS.load(); 
  fpPromise.then(function (fp) {
    return fp.get();
  }).then(function (result) {
    visitorId = result.visitorId;
    // console.log(visitorId);
    verifyRequest(visitorId);
  });
}
function verifyRequest(fingerprint){
  if(localStorage.getItem(is_sign) === 'true' ){
    $('.zhuan').removeClass('zhuanIng').addClass('zhuanEnd');
    $('.btnSig').addClass('btnSigEnd');
    isClick = true;
    return false;
  }
  $.ajax({
    url: '/api/v1/verify',
    type: 'POST',
    data: {"id":fgId,"fingerprint":fingerprint}
  })
  .done(function(res) {
    // 已经签名
    if(res.code !== 0){
      // $('.sign').removeAttr('onclick').text(checkTip('您已经签名了'));
      localStorage.setItem(is_sign, 'true');
      $('.zhuan').removeClass('zhuanIng').addClass('zhuanEnd');
      $('.btnSig').addClass('btnSigEnd');
      isClick = true;
    }
  })
  .fail(function(e) {
    console.log(e.statusText);
  })
  .complete(function() {
  })
}

// 检查不同语言提示语
function checkTip(info){
  var infos = info
  if(language !== 'zh'){
    switch(info){
      case '您已经签名了':
          infos = 'You have signed';
          break;
      case '已经签名过':
          infos = 'You have signed';
          break;
      case '签名失败，请刷新重试':
          infos = 'Failed. Please refresh and retry';
          break;
      case '您已签名，不可重复签名':
          infos = 'You’ve signed. Non-repeatable signature';
          break;
      case '你的网络签名的人太多，请稍后再试':
          infos = 'Too many requests from your intranet. Please retry later';
          break;
      case '签名失败':
          infos = 'Failed.';
          break;
      case '签名成功':
          infos = "You've signed";
          break;
      case '签名失败，您的网络存在频繁操作或作弊行为':
          infos = 'Failed. Frequent attempts or cheating behavior from your intranet';
          break;
      case '签名失败，您的网络或设备存在作弊行为':
          infos = 'Failed. Cheating behavior detected from your intranet or device';
          break;
    }
  }
  return infos;
}

// 点击签名
$('.btnSig').click(function(event) {
  if(isClick){
    return false;
  }
  // $('.add1').removeClass('success');
  isClick = true;
  $('.zhuan').addClass('zhuanIng');
  var issign = localStorage.getItem(is_sign) ? localStorage.getItem(is_sign) : false ;
  issign = (issign === 'true') ? true : false;
  if(issign) {
    message1(checkTip("您已经签名了"));
    localStorage.setItem(is_sign, true);
    $('.zhuan').removeClass('zhuanIng').addClass('zhuanEnd');
    $('.btnSig').addClass('btnSigEnd');
    // $('.sign').removeAttr('onclick').text(checkTip('您已经签名了'));
    return false;
  }
  postRequest(visitorId);
  
});

// 签名-指纹
function postRequest(fingerprint){
  $.ajax({
    url: '/api/v1/sign',
    type: 'POST',
    data: {"id":fgId,"fingerprint":fingerprint}
  })
  .done(function(res) {
    if(res.code === 0){
      $('.zhuan').fadeOut('200', function() {
        $('.zhuan').removeClass('zhuanIng').addClass('zhuanEnd').fadeIn();
        $('.btnSig').addClass('btnSigEnd');
        $('.add1').addClass('success');
      });
      localStorage.setItem(is_sign, true);
      changeEndNum += 1;
      if(changeNum === undefined){
        return false;
      }
      clock(changeNum, changeEndNum);
    }else{
      message1(checkTip(res.msg));
      $('.zhuan').removeClass('zhuanIng');
      if(res.code == -1){
        localStorage.setItem(is_sign, true);
        $('.zhuan').removeClass('zhuanIng').addClass('zhuanEnd');
        $('.btnSig').addClass('btnSigEnd');
      }else if(res.code == 400101){
        localStorage.setItem(is_sign, true);
        $('.zhuan').removeClass('zhuanIng').addClass('zhuanEnd');
        $('.btnSig').addClass('btnSigEnd');
      }else{
        isClick = false;
      }
    }
  })
  .fail(function(e) {
    console.log(e.statusText);
  })
  .complete(function() {
  })
}

// 语言切换
$('.language').click(function(){
  if($(this).text() === '中文'){
      language = 'zh';
      $('.content').removeClass('content_en');
  }else{
      language = 'en';
      $('.content').addClass('content_en');
  }
  localStorage.setItem(language1, language);
  toggleLanguage(language);
  renders(language);
});

// 数字动效
var currentTime = 25000000;
var endTime = 25000000+100;
var changeNum;
var changeEndNum;
var timerId1;
var flagNum;
// clock(currentTime, endTime);
function clock(current, endTime) {
  updateTime();
  function updateTime() {
    var arrNum, seconds, minutes, hours, month, times = {};
    if(current > endTime){
      return false;
    }
    changeNum = current;
    changeEndNum = endTime;
    arrNum = (current + '').split('').reverse();
    for(var i = 0;i< arrNum.length; i++){
      times['num'+(i+1)] = arrNum[i];
    }
    // console.log(current,endTime,arrNum.length,times)
    // if(flagNum !== arrNum.length){
      // $('.time-container').show();
      // for(var i = arrNum.length;i< 11; i++){
      //   $('.num'+(i+1)).hide();
      // }
    // }

    flagNum = arrNum.length

    if(flagNum === 9){
      $('.time-container').show();
    }

    for (type in times) {
      if (times.hasOwnProperty(type)) {
        setTimes(type, times[type]);
      }
    }
    if(timerId1){
      clearTimeout(timerId1)
    }
    // console.log(changeNum,endTime)
    timerId1 = setTimeout(updateTime, 800);
    current++
  }

  function getPreviousTime(type) {
    return $('#' + type + '-top').text();
  }

  function setTimes(type, timeStr) {
    setTime(getPreviousTime(type + '-ones'),
      timeStr, type + '-ones');
  }

  function setTime(previousTime, newTime, type) {
    if (previousTime === newTime) {
      return;
    }
    setTimeout(function() {
      $('#' + type + '-top').text(newTime);
    }, 150);
    setTimeout(function() {
    $('.bottom-container',
      $('#' + type + '-bottom')).text(newTime);
    }, 365);

    animateTime(previousTime, newTime, type);
  }

  function animateTime(previousTime, newTime, type) {
    var top, bottom;
    top = $('#top-' + type + '-anim');
    bottom = $('#bottom-' + type + '-anim');
    $('.top-half-num', top).text(previousTime);
    $('.dropper', bottom).text(newTime);
    top.show();
    bottom.show();
    $('#top-' + type + '-anim').css('visibility', 'visible');
    $('#bottom-' + type + '-anim').css('visibility', 'visible');
    animateNumSwap(type);
    setTimeout(function() {
      hideNumSwap(type);
    }, 365);
  }

  function animateNumSwap(type) {
    $('#top-' + type + '-anim').toggleClass('up');
    $('#bottom-' + type + '-anim').toggleClass('down');
  }

  function hideNumSwap(type) {
    $('#top-' + type + '-anim').toggleClass('up');
    $('#bottom-' + type + '-anim').toggleClass('down');
    $('#top-' + type + '-anim').css('visibility', 'hidden');
    $('#bottom-' + type + '-anim').css('visibility', 'hidden');
  }
}

// 轮播图
var isSlide;
var mySwiper = new Swiper('.swiper',{
  autoplay : 3200,
  loop : true,
  spaceBetween : 30,
  autoplayDisableOnInteraction : false,
  pagination : '.swiper-pagination',
  onSlideChangeStart: function(swiper){
    isSlide = true;
  },
  onSlideChangeEnd: function(swiper){
    $('.swiper-slide .conts .packUp').click();
    isSlide = false;
  }
});

$('.swiper-slide h5').on("click", "span", function(e) {
  if(isSlide){
    return false;
  }
  $(this).hide();
  $(this).parent().siblings('.conts').show();
  $('.swiper-pagination').hide();
  mySwiper.lockSwipes();
  mySwiper.stopAutoplay();
});
$('.swiper-slide .conts .packUp').on("click", function(e) {
  $('.swiper-slide h5 span').show();
  $('.swiper-slide .conts').hide();
  $('.swiper-pagination').show();
  mySwiper.unlockSwipes();
  mySwiper.startAutoplay();
});

// 点击分享
$('.circle .share').click(function(){
  $('html,body').height('100%');
  $('.closed,.closeInfo').show();
  $('.shareImg img').attr('src', $('.shareImg img').attr('data-src'));
  $('.content').css({
    'position': 'fixed',
    'opacity': '0',
    'z-index': '-100'
  });
  $('.shareImg').show().scroll(0,0);
});
$('i.closed').click(function(){
  $('html,body').height('auto');
  $('.closed,.closeInfo').hide();
  $('.shareImg').hide();
  $('.content').css({
    'position': 'relative',
    'opacity': '1',
    'z-index': '1'
  });
  mySwiper.startAutoplay();
  isSlide = false;
  // 开始轮播
});

// 每分钟取一次数据
var timerId0;
function perMinutes(){
  if(timerId0){
    clearInterval(timerId0);
  }
  timerId0 = setInterval(startMarqueue,60000);
}

function startMarqueue(){
  $.ajax({
    url: '/api/v1/num',
    type: 'get'
  })
  .done(function(res) {
    if(res.code == 0){
      res.data = res.data ? res.data: {total: null};
      res.num = res.data.total == null ? 0 : res.data.total;
      changeEndNum = parseInt(res.num);
      clock(changeNum, changeEndNum);
    }
  })
  .fail(function(e) {
    console.log(e.statusText);
  });
}

// 获取信息
var flagInfo = $('#fable').html();
function getInfo(){
  $.ajax({
    url: '/api/v1/info',
    type: 'get'
  })
  .done(function(res) {
    if(res.code == 0){
      res.data = res.data ? res.data: {total: null};
      res.num = res.data.total == null ? 0 : res.data.total;
      $('#num').text(res.num);

      if(!res.data.cities){
        return false;
      }
      var data = res.data.cities;
      var arr = data;
      function compare(property){
          return function(a,b){
              var value1 = a[property];
              var value2 = b[property];
              return value2 - value1;
          }
      }
      data = arr.sort(compare('time'));
      var html = '';
      var current_stamp = Date.parse(new Date())/1000;
      for(var i=0; i<data.length;i++  ){
          var diff = parseInt(current_stamp-data[i].time);
          if(diff<=0){
            diff = 1;
          }
          var timestr = '';
          if(diff<60) timestr = diff+'秒前';
          if(diff>=60 && diff<3600) timestr = Math.floor(diff/60) +'分钟前';
          if(diff>=3600 && diff<86400) timestr = Math.floor(diff/3600)+'小时前';
          if(diff>=86400 && diff<2592000) timestr = Math.floor(diff/86400)+'天前';
          if(diff>=2592000 && diff<31104000) timestr = Math.floor(diff/2592000)+'月前';
          if(diff>=31104000) timestr = Math.floor(diff/31104000)+'年前';
          html+="<h4><i class='iconcs'></i><p><span class='textspan'>来自"+data[i].city+"的网友参加了签名</span><span class='minutespan' >"+timestr+"</span></p></h4>";
      }
      $('#fable').html(flagInfo);
      $('#box').empty().append(html);
      marque(175,148,'fable','box');
      currentTime = res.num || 25000000;
      if(changeNum){
        // console.log('切换获取getInfo')
        if(currentTime > changeEndNum){
          clock(changeNum, currentTime);
          return false;
        }
        clock(changeNum, changeEndNum);
      }else{
        // console.log('获取getInfo')
        if(currentTime<100){
          clock(currentTime-20, currentTime);
          return false;
        }
        clock(currentTime-100, currentTime);
      }
      // console.log('getInfo',currentTime, changeNum,changeEndNum);
    }
  })
  .fail(function(e) {
    console.log(e.statusText);
  })
}
// 网友滚动
// 滚动
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
var timerId3;
var timerId2;
function marque(width,height,marqueName,marqueCName){
  try{
    marqueesHeight = height;
    stopscroll     = false;
    scrollElem = document.getElementById(marqueName);
    with(scrollElem)
    {
      style.width     = width;
      style.height    = marqueesHeight;
      style.overflow  = 'hidden';
      noWrap          = true;
      align           = 'left';
    }
    preTop     = 0;
    currentTop = 0;
    stoptime   = 0;
    leftElem = document.getElementById(marqueCName);
    scrollElem.appendChild(leftElem.cloneNode(true));

    if(timerId3){
      clearTimeout(timerId3);
    }
    timerId3 = setTimeout("init_srolltext()",1000);
  }catch(e) {}
}
function init_srolltext(){
  scrollElem.scrollTop = 0;
  if(timerId2){
    clearTimeout(timerId2);
  }
  timerId2 = setInterval('scrollUp()', 30);
}
function scrollUp(){
  if(stopscroll) return;
  currentTop += 1;
  if(currentTop == marqueesHeight+1){
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == 1) {
      currentTop = 0;
      stoptime = 0;
    }
  }else{
    preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 2;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = marqueesHeight;
      scrollElem.scrollTop += 2;
    }
  }
}

// 弹框封装
function messageShow1() {
    var w = $('.message1');
    w.addClass('messageShow');
};
function messageHide1() {
    var w = $('.message1');
    w.removeClass('messageShow').removeClass('messageShowNavFix');
};
function messageOut1() {
    var w = $('.message1');
    w.css('display', 'none');
    w.html('');
};
var t1, t2, t3;
function message1(str) {
    var w = $('.message1');
    clearTimeout(t1);
    clearTimeout(t2);
    clearTimeout(t3);
    w.html(str);
    w.css('display', 'block');
    t1 = setTimeout("messageShow1()", 80);
    t2 = setTimeout("messageHide1()", 2500);
    t3 = setTimeout("messageOut1()", 3000);
};