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

Đăng ký nhận bản tin!

Tôi sẽ gửi một email cho bạn khi tôi tạo ra một cái gì đó mới. Tôi sẽ không bao giờ gửi thư rác cho bạn 🙅‍♂️! và bạn có thể hủy đăng ký bất kỳ lúc nào.