Javascript Tips

Tự động tải lại trang nếu tập tin JS thay đổi

  1. Cài đặt nodejs .
  2. Cài đặt máy chủ trực tiếp bằng cách sử dụng nodejs : npm install -g live-server
  3. cd vào thư mục dự án.
  4. chạy live-server (chấp nhận tất cả các thông báo mạng)
  5. Duyệt: http://127.0.0.1:8080 và thưởng thức!

Thêm MathJax vào trang web

Chỉ cần thêm mã dưới đây trước thẻ <head>

Javascript
<script type="text/javascript">
  // SETTINGS
  window.MathJax = {
    jax: ["input/TeX", "output/SVG"],
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
    SVG: {
      linebreaks: { automatic: true },
      styles: {".MathJax_SVG_Display": {margin: "0.5rem 0", overflow: "auto"}},
      scale: 90
    }
  };
</script>

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG">
</script>

Back to top (nút quay lại đầu trang )

Để thêm nút Back to top vào trang web của bạn: Đặt mã javascript và css đây trong thẻ <head>...</head> và html trong <body>...</body>

Javascript
$(window).load(function(){
  if ($('#back-to-top').length) {
      var scrollTrigger = 100, // px
          backToTop = function () {
              var scrollTop = $(window).scrollTop();
              if (scrollTop > scrollTrigger) {
                  $('#back-to-top').addClass('show');
              } else {
                  $('#back-to-top').removeClass('show');
              }
          };
      backToTop();
      $(window).on('scroll', function () {
          backToTop();
      });
      $('#back-to-top').on('click', function (e) {
          e.preventDefault();
          $('html,body').animate({
              scrollTop: 0
          }, 700);
      });
  }
});
CSS
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9999;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  background: #bbb url(../images/arrow-up.svg) no-repeat center 50%;
  color: #444;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  opacity: 0;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  &:hover {
    background: #e9ebec url(../images/arrow-up.svg) no-repeat center 50%;
  }
  &.show {
    opacity: 1;
  }
}
HTML
<a href="#" id="back-to-top"></a>

Find and Replace

  • Đoạn mã sau có tác dụng tìm nội dung bên trong các tags <code>...<\code> bên trong class="post-body" thay thành một liên kết tùy ý cho trang web của bạn. Khi chạy đoạn mã trên ta sẽ được kết quả: Tìm từ khóa Javascript.

    <script>
    $(function() {
    $('div.post-body').children('code').each(function() {
      $(this).replaceWith(function() {
          return $('<a href="https://phannhatchanh.com/tags#' + $(this).text() + '"><code>' + $(this).html() + '</code></a>');
      });
    });
    });
    </script>
    <div class="post-body">
    Tìm từ khóa <code>Javascript</code>.
    </div

  • Đoạn javascript dưới đây sẽ tìm đổi tất cả các URL dạng hình ảnh trong <div id="post">...<div> và chuyển sang <img> để hiển thị hình ảnh.

    var content = document.getElementById('post').innerHTML;
    content = content.replace(/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig, "<img src='$1' alt=''\/>");
    document.getElementById('post').innerHTML = content;

    Xem thêm: Regex Replace URL with Links

© 2019-2020 Phan Nhật Chánh