网页编程常见问题及解决办法

网页编程常见问题 JS CS

创建时间:2018-11-04 11:19

阅读:

一、JS方面

对象的深拷贝

简单的实现拷贝后不再指向同一地址：

1 2	a = {'a':1}; b = JSON.pare(JSON.stringfy(a))

屏蔽移动端弹出菜单

1
2
3

node.addEventListener('contextmenu', function(e){
  e.preventDefault();
});

js实现移动端长按

移动端有ontouchstart、ontouchmove、ontouchend三个属性来对点击事件控制。
ontouchstart：点击时触发。
ontouchmove：手指移动后触发。
ontouchend：手指离开时触发。
只对移动端生效
长按实现思路：
当手指点击时触发ontouchstart,开始计时，如果到了定时时间则判断为长按，执行相应长按函数，否则清除定时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长按测试</title>
</head>
<body>
   <div id="hit" style="width:100%; height:100px; background-color:#CCC;" ontouchstart="gtouchstart()" ontouchmove="gtouchmove()" ontouchend="gtouchend()" onclick="">测试区域</div>    
<script>  
    //以下判断语句用来处理手机端出现两次点击问题
    if ((window.screen.availHeight)>710) {
            var a = document.getElementById("hit");
            a.setAttribute("onclick", "myclick()");
    }
    function myclick(){
        alert("电脑点击");
    };

    var timeOutEvent=0;//定时器   
    //开始按   
    function gtouchstart(){   
        timeOutEvent = setTimeout("longPress()",500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适   
        return false;   
    };   
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件   
    function gtouchend(){   
        clearTimeout(timeOutEvent);//清除定时器   
        if(timeOutEvent!=0){   
            //这里写要执行的内容（尤如onclick事件）   
            alert("点击事件触发");

        }  
        else{
            alert("长按事件结束");
        }


        return false;   
    };   
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按   
    function gtouchmove(){   
        clearTimeout(timeOutEvent);//清除定时器   
        timeOutEvent = 0;
        document.getElementById("sum").innerHTML = "end...";  

    };   
    var i = 0;  
    //真正长按后应该执行的内容   
    function longPress(){   
        timeOutEvent = 0;   
        //执行长按要执行的内容，如弹出菜单  
        alert("长按事件触发");

    };


</script>   
</body>
</html>

js实现网页录音

参考Github中两个例子

使用XMLHttpRequest上传blob数据

构建Form表单，如果是Django必须添加一个csrfmiddlewaretoken字段。
html需包含以下内容：
1
2
3
<form name="myform">
{% csrf_token %}
</form>

JS内容：

var fd = new FormData();
//csrf校验
var csrf = myform.csrfmiddlewaretoken.value;
fd.append('csrfmiddlewaretoken',csrf);

fd.append("file", this.getBlob());
var xhr = new XMLHttpRequest();
//设置xhr请求的超时时间
xhr.timeout = 3000;
//设置响应返回的数据格式
xhr.responseType = "text";
//创建一个 post 请求，采用异步
xhr.open('POST', url, true);
//注册相关事件回调处理函数
xhr.onload = function(e) {
   if(this.status == 200||this.status == 304){
   alert(xhr.responseText);
  }
};
//发送数据
xhr.send(fd);

引用外部的js文件

1	<script src="script.js"></script>

设置class

1	img_previous.setAttribute("class","previous disabled");

获取子节点并删除属性

1	img_previous.firstElementChild.removeAttribute("href");

拖拽上传

一、html中定义一个标签，如：
1
2
<div id="dragZone">
</div>
css中设置div的大小，边框

为组件设置监听事件

<script>
  var dragZone = document.getElementById("dragZone");
  //拖拽进入
  dragZone.addEventListener("dragenter", function (e) {
      e.preventDefault();//去除浏览器默认动作，如直接打开图片
      e.stopPropagation();//去除浏览器默认动作，如直接打开图片
      e.dataTransfer.dropEffect = "copy";//拖入时鼠标效果

  }, false);
  //拖来拖去
  dragZone.addEventListener("dragover", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.dataTransfer.dropEffect = "copy";

  }, false);
  //拖离
  dragZone.addEventListener("dragenleave", function (e) {
      e.preventDefault();
      e.stopPropagation();

  }, false);
  //放入，上传逻辑写这里
  dragZone.addEventListener("drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
      var fileList = e.dataTransfer.files; //获取文件对象

      var fr = new FileReader();
      //显示上传图片
      fr.onload = function () {
          icon.src = fr.result;
      };
      // 注意要先设置回调再读取文件
      fr.readAsDataURL(fileList[0]);

  }, false);
</script>

获取input 的file内容并上传

1 2	var img_info = document.getElementById("img_info"); file_temp = input_file.files[0];

得到的为file对象，两种方式上传到服务器：

1、直接将file对象上传，服务器端使用save方法直接保存；

2、将file对象转化为dataURL后上传，服务器保存方式为：

pic_data_url = request.form.get("picdata")
imgdata = base64.b64decode(pic_data_url.split(',')[1])
with open("test.jpg", 'wb') as f:
    f.write(imgdata)

file对象转化为dataurl

如果需设置img标签的src,资源不在服务端，则可以将src设置为dataURL

var fr = new FileReader();
var icon = document.getElementsByClassName("icon")[0];
//显示上传图片
fr.onload = function () {
    icon.src = fr.result;
};
// 注意要先设置回调再读取文件,select_file为file对象
fr.readAsDataURL(select_file);

作用域问题

　　1. 放在<head>部分
head部分的代码会先于其余部分解析，所以如果要获取元素节点需要在js中加入window.onload=function(){}这个函数(加载完所有资源后执行)并把代码写在function中，这样才能获取到html定义的节点。
　　2. 放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。

全局变量与局部变量

　　1. 局部变量定义在function内部，格式为var+变量名
　　2. 全局变量两种常用的声明方式：
　　　１.定义在函数外部
　　　２.函数内部的变量上升为全局变量：不用var直接给变量赋值

获取服务端压缩文件并解压

function loadFile(url) {
    let result = null;
    let xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
        if (this.status === 200 || this.status === 304) {
            result = JSON.parse(pako.inflate(xhr.response, {to: 'string'}));
            jpgFiles = result;
            loadImage();//加载图片，在window.onload之前执行
        }
    };
    xhr.send();

}

url:为服务器端的压缩文件地址，注意设置的responseType.获取后使用pako解压

二、CSS方面

`div`元素居中问题

水平居中

* 1、使用`margin`居中  
1
2
margin-left:50%;
margin-rigth:50%;


* 2、使用`inline-block`居中  
将元素设为`inline-block`,然后将父类元素设为`text-align:center;`

水平垂直居中

父类元素定义以下属性：

1
2
3

display: flex;
justify-content: center;
align-items: center;

CSS设置鼠标悬浮样式

1
2
3

th:hover{
	background-color:blue;
}

同一行解决图片文字不对齐

设置图片的margin-bottom:-10px可使文字上移

将button放在父容器右边

1	float:right

宽高自适应

即调整窗口大小时，元素宽高自动变化。
宽度： 将父容器宽度设为100%，子元素根据需要设置百分比。

html方面

Chrome 窗口打开时全屏

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#212121">
<title>i-Music</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

其中，theme-color为状态栏颜色。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com