前端知识摘要

1、实现读取txt文本,修改并下载修改后的内容。

html:

<input type="file" id="file" />
  <textarea class="text"></textarea> 
  <a class="down"  download>下载</a>

js:

$("#file").change(function(e){
    var reader = new FileReader()
      var img1 = event.target.files[0]
      var filetext=''
      reader.readAsText(img1)
      reader.onloadend = () => {
        filetext = reader.result
        $(".text").text(filetext)
      }

  })
  var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
  };
  $(".down").click(function(){
    funDownload($(".text").text(), 'a.txt');
  })

 2、element.insertAdjacentHTML(position, html);

3、获取浏览器上一页的url  >>>document.referrer

4、移动端屏幕滚动事件

$(window).scroll(function () {
      var t =$(window).scrollTop(),
        h = $(".header_menu").height()+$(".search-screen-title").height();
      if (t > h) {
        $(".search-screen__wraper").addClass("auto-fixed")
        $(".search-screen__wraper-space").show()        
      } else {
        $(".search-screen__wraper").removeClass("auto-fixed")
        $(".search-screen__wraper-space").hide()
      }
    })

第二行,以前是使用var t = $(document).scrollTop(),现在不支持这种写法,用过var t = $("body,html").scrollTop()。在谷歌浏览器上可以,但是真机运行又不行。

5、html中video视频js实现暂停功能

var myvideo = document.getElementById("houseVideo")
myvideo.pause()

注意video一点要用id。否则无法获取到视频对象,导致里面的pause、load()、play()等方法调用报错

 6.只能输入正整数的input框实现

<input type='text' onkeyup="value=value.replace(/^(0+)|[^d]+/g,'')">

 7、之前一直困扰我的问题ios手机上点击事件失效为什么时有时无终于被我找到原因了(jq用法)。

  当一个元素是js动态生成的,不是一开始页面就存在的,那么它的点击事件需要绑定在一定存在的父元素上(我一般绑在body上)。此时这个元素需要加上cursor:pointer。点击事件click才能生效。

原文地址:https://www.cnblogs.com/nanacln/p/10156739.html