html与js笔记

input标签file类型选择文件夹

<input id="file" type="file"  onchange="a()" webkitdirectory directory />

输入框选中时去掉淡蓝色边框线

input:focus {outline: 0;}

div不换行并排显示

display:inline;

超链接无下划线，鼠标悬停时有下划线

<style>
a{TEXT-DECORATION:none}
a:hover{TEXT-DECORATION:underline}
</style>

js中json解析与转换

JSON.stringify(data);
var arr = JSON.parse(arr);

html中本地存储

localStorage.getItem('arr');
localStorage.setItem('id',res.datas);
localStorage.removeItem('arr');

js刷新页面方法

 history.go(0) 
 location.reload() 
 location=location 
 location.assign(location) 
 document.execCommand('Refresh') 
 window.navigate(location) 
 location.replace(location) 
 document.URL=location.href

JavaScript返回上一页代码区别：

window.history.go(-1);  //返回上一页
window.history.back();  //返回上一页
//如果要强行刷新的话就是：window.history.back();location.reload();
window.location.go(-1); //刷新上一页

显示

var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

DOM元素控制显示与隐藏

document.getElementById("typediv1").style.visibility="hidden";//隐藏  

document.getElementById("typediv1").style.visibility="visible";//显示  

document.getElementById("typediv1").style.display="none";//隐藏  

document.getElementById("typediv1").style.display="";//显示  

js本地时间格式化

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if(month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if(strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
            " " + date.getHours() + seperator2 + date.getMinutes() +
            seperator2 + date.getSeconds();
        return currentdate;
    }

复选框全选，全不选

<script type="text/javascript">
    function selectall() {
        var a = document.getElementsByTagName("input");
        if (a[0].checked == true) {
            for (var i = 0; i < a.length; i++)
                if (a[i].type == "checkbox")
                    a[i].checked = false;
        } else {
            for (var i = 0; i < a.length; i++)
                if (a[i].type == "checkbox")
                    a[i].checked = true;
        }
    }

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});
</script>

多次调用同一js或者jsp时，例如验证码刷新的，加一个参数为随机数，用来防止调用缓存。

js中ajax访问后台时跨域问题，在服务端代码添加

HttpServletResponse response
response.setHeader("Access-Control-Allow-Origin", "*");

js中ajax访问

$.ajax({
                    type: "get",
                    dataType:"json",
                    url: "http://localhost:8080/test/test",
                    async: true,
//                  statusCode: {
//                      404: function() {
//                          alert('page not found');
//                      }
//                  },
                    error: function(XMLHttpRequest) {
                        if(XMLHttpRequest.status=404){
                            console.log(XMLHttpRequest);
                        }
                    },
                    success: function(data,status,XMLHttpRequest) {
                        console.log("-----------------------------------");
                        console.log(data);
                        console.log("-----------------------------------");
                        console.log(status);
                        console.log("-----------------------------------");
                        console.log(XMLHttpRequest);

                    }
                });