Nota_javascript pembangunan sambungan penyemak imbas Google Chrome kemahiran

Mengikut peraturan syarikat, lapan jam sebulan, sistem kerja yang fleksibel. Jadi setiap orang selalunya tidak datang tepat pada masanya Jika sesuatu berlaku, mereka balik awal selepas keluar kerja. Jadi mungkin tidak cukup waktu bekerja dalam sebulan, tetapi kalendar kehadiran syarikat adalah seperti ini:

Kecuali cuti dan cuti berkanun, gaya paparan yang lain adalah sama Sangat menyusahkan untuk menganggarkan anggaran waktu bekerja pada bulan ini satu demi satu setiap kali. Kemudian, saya melihat seseorang dalam syarikat itu menggunakan sambungan Chrome yang boleh mengira waktu bekerja selama sebulan, tetapi saya rasa saya masih tidak nampak perkara yang ingin saya lihat, kerana sebagai tambahan kepada jam kerja terkumpul setiap bulan, Saya juga ingin melihat : Purata waktu bekerja sehari, waktu bekerja sehari, bilangan hari selepas pukul 20 (yang keluar kerja selepas pukul 20 boleh dibayar balik untuk makan malam, haha...), bilangan hari apabila mereka keluar kerja selepas pukul 22 (tambang teksi dibayar balik)... Jadi saya memutuskan Hanya menulis satu sendiri.

Dalam langkah pertama, saya menulis kaedah JS dan kemudian menyalin dan menampalnya melalui Konsol alat pembangun F12 untuk menjalankannya.

Sistem OA yang digunakan oleh syarikat tidak merujuk perpustakaan jQuery, jadi idea awal saya adalah untuk merujuk perpustakaan kelas jQuery secara dinamik, seperti berikut:

Salin kod Kod adalah seperti berikut:

var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
document.body.appendChild(skrip);

Tetapi kami menghadapi masalah: satu ialah $ telah diduduki, dan satu lagi ialah sistem HR menggunakan sarang iframe, dan terdapat juga sarang bingkai, dan strukturnya sangat rumit. Kod yang dijalankan oleh konsol dijalankan di peringkat atas, dan pemalam sambungan krom kemudiannya dijalankan dalam bingkai dalaman Mungkin JS di sini tidak boleh digunakan secara langsung. Walaupun masalah $ diduduki boleh diselesaikan oleh jQuery.noConflict();, terdapat masalah pesanan panggilan antara perpustakaan jquery dan perpustakaan JS sistem asal, dan objek jQuery tidak boleh diakses dalam bingkai dalaman. Akhirnya saya memutuskan untuk berhenti menggunakan jQuery dan menggunakan JavaScript asli.

Kod JS adalah seperti berikut:

/*
 * author:清明雨上
 * date:2016-1-5
 */
var mydate = function() {
  //time2-time1
  function getTimeDiff(time1, time2) {
    var st1 = time1.split(':');
    var st2 = time2.split(':');
    return ((st2[0] | 0) * 60 + (st2[1] | 0)) - ((st1[0] | 0) * 60 + (st1[1] | 0) * 1);
  }

  var timeList = [];
  var mymain = window.parent.frames['Main'].document.getElementById('ctl00_cphMain_CalendarAC');
  var listAC = mymain.getElementsByClassName('listAC');
  for (var i = 0; i < listAC.length; i++) {
    var item = listAC[i];
    var t = {};
    t.timeSpan = item.getElementsByTagName('td')[1].innerText;
    t.remark = item.getElementsByTagName('td')[2].innerText;
    timeList.push(t);
  };

  var totalMin = 0;
  var noworkDays = 0; //请假天数
  var workDays = 0; //实际上班天数
  var workHourEveryday = [];
  var no8h = 0; //未满8小时天数
  var over20 = 0; //20点以后下班天数
  var over21 = 0; //21点以后下班天数
  var over22 = 0; //22点以后下班天数
  var over23 = 0; //23点以后下班天数
  for (var i = 0; i < timeList.length; i++) {
    var time = timeList[i];
    if (time.remark != '无') {
      noworkDays++;
      continue;
    }
    if (time.timeSpan == '无刷卡记录')
      continue;

    var splitTime = time.timeSpan.split('~');
    if (splitTime.length == 2) {
      //正常上下班
      var begin = splitTime[0];
      var end = splitTime[1];
      var thisMin = getTimeDiff(begin, end);
      totalMin += thisMin;
      workDays++;
      if (thisMin / 60 < 8) {
        workHourEveryday.push('<font color="red"><b style="font-size:15px">' + parseInt(thisMin / 60) + '</b>.' + thisMin % 60 + '</font>');
        no8h++;
      } else {
        workHourEveryday.push('<b style="font-size:15px">' + parseInt(thisMin / 60) + '</b>.' + thisMin % 60);
        var offworkHour = parseInt(end.split(':')[0]);
        if (offworkHour >= 20) {
          over20++;
        }
        if (offworkHour >= 21) {
          over21++;
        }
        if (offworkHour >= 22) {
          over22++;
        }
        if (offworkHour >= 23) {
          over23++;
        }
      }
    }
  };
  var myHour = parseInt(totalMin / 60); //本月工作累计小时数
  var otherMin = totalMin % 60; //本月工作出小时部分外的分钟数
  var avgHourOneDay = workDays == 0 &#63; '0.0' : '<b style="font-size:15px">'+(parseInt(myHour / workDays) + '</b>.' + (parseInt((myHour % workDays) * 60 / workDays) + parseInt(otherMin / workDays))); //平均每天工作时长

  var html = '<div class="alectest" style="background: #cbebfb;padding:7px;">\
        <div>出勤时间：<b style="font-size:15px;color:red">' + myHour + '</b>小时<font color="red">' + otherMin + '</font>分钟（平均<font color="red">' + avgHourOneDay + '</font>小时/天）</div>\
        <div>参考时间：' + workDays * 8 + '小时【' + workDays + '天】（除去请假和节假日，实际有打卡记录的天数）</div>\
        <div>请假/外出天数：' + noworkDays + '天</div>\
        <div>每天工作时间(格式：小时.分钟)：' + workHourEveryday.join('，') + '</div>\
        <div>未满8小时天数：<b style="font-size:15px">' + no8h + '</b>天</div>\
        <div>20点以后下班天数：<b style="font-size:15px">' + over20 + '</b>天</div>\
        <div>21点以后下班天数：<b style="font-size:15px">' + over21 + '</b>天</div>\
        <div>22点以后下班天数：<b style="font-size:15px">' + over22 + '</b>天</div>\
        <div>23点以后下班天数：<b style="font-size:15px">' + over23 + '</b>天</div>\
       </div>'
  var alectest = mymain.parentNode.getElementsByClassName('alectest');
  if (alectest.length > 0) {
    // mymain.parentNode.removeChild(alectest[0]);
    alectest[0].innerHTML = html;
  } else {
    var div = document.createElement("div");
    div.innerHTML = html;
    var fragement = document.createDocumentFragment();
    while (div.childNodes[0]) {
      fragement.appendChild(div.childNodes[0]);
    }
    mymain.parentNode.insertBefore(fragement, mymain);
  }
  bindBtnClick();
}
var bindBtnClick = function() {
  window.parent.frames['Main'].document.getElementById('ctl00_cphTop_BtnQuery').addEventListener('click', function() {
    var inter = setInterval(function() {
      if (window.parent.frames['Main'].document.getElementById('ctl00_cphMain_CalendarAC') &&
        window.parent.frames['Main'].document.getElementById('ctl00_UpMaster').style.display == 'none') {
        clearInterval(inter);
        mydate();
      }
    }, 500);
  }, false);
}
bindBtnClick();

Perihalan kod: Dengar acara klik butang pertanyaan kehadiran Selepas maklumat kehadiran dimuatkan, laksanakan kaedah JS saya.

Langkah kedua ialah membangunkan sambungan Chrome

Bahan rujukan: http://open.chrome.360.cn/extension_dev/content_scripts.html (Soal huraian setiap atribut nod content_scripts manifes.json)

Manifest.json diperlukan, kandungan akhir adalah seperti berikut:

{
 "manifest_version":2,
  "name": "Extension Name", 
 "version": "0.1.0", 
 "description": "插件描述",
 "icons": { "48": "icon.png" },
 "content_scripts": [
  {
   "all_frames" : true,
   "matches": ["http://*"],
   "js": ["haha.js"],
   "run_at": "document_end"
  }
 ]
}

Selain itu, letakkan imej icon.png dalam direktori yang sama Pada ketika ini, semua fail sudah sedia

Buka mod pembangun senarai sambungan Chrome "Sambungan pakej besar..." dan masukkan direktori induk di mana tiga fail di atas terletak dalam direktori akar sambungan.

Klik [Sambungan Pakej].

Nota: Jika mengklik butang tidak mencerminkan untuk masa yang lama, mungkin chrome anda tidak membenarkan sambungan tidak diperakui pihak ketiga Penyelesaiannya adalah dengan mengklik kanan pintasan krom > Properties > tambahkan "dayakan " selepas kotak input sasaran -mudah-luar-stor-sambungan-pasang", perhatikan ruang sebelumnya.

Kemudian cuba langkah di atas sekali lagi.

Langkah 3: Halang Chrome daripada menyekat sambungan tidak rasmi Tetapan

Chrome akan menggesa untuk menggantung sambungan tidak rasmi Gesaan akan muncul setiap kali ia dimulakan, yang sangat menjengkelkan.

Cari maklumat:

http://www.itechzero.com/prevent-chrome-shielding-unofficial-extensions-tutorial.html (Tutorial tentang menghalang Chrome daripada menyekat sambungan tidak rasmi)

Mengikut maklumat di atas, masalah ini boleh diselesaikan dengan mudah.

　

Pada ketika ini, program berskala selesai, dan hasilnya adalah seperti berikut: