26种你可能想不到的JS技巧

1. οncοntextmenu=“window.event.returnValue=false” 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)>< td>notd>table>

2. 取消选取、防止复制

<body onselectstart="return false">body>

3. 不准粘贴

 οnpaste="return false"

4. 防止复制

οncοpy="return false;" oncut="return false;"

5. IE 地址栏前换成自己的图标

<link rel="Shortcut Icon" href="favicon.ico">

6. 可以在收藏夹中显示出你的图标

<link rel="Bookmark" href="favicon.ico">

7. 关闭输入法

<input style="ime-mode:disabled">

8. 永远都会带着框架

<script language="JavaScript">
if (window == top)top.location.href = "frames.htm"; //frames.htm 为框架网页
script>

9. 防止被人 frame

<script language="JavaScript">
if (top.location != self.location)top.location=self.location; 
script>

10. 网页将不能被另存为

<noscript>
    <iframe src=*.html>< /iframe>
noscript>

11. 查看网页源代码


12. 删除时确认

删除< /a>

13. 判断上一页的来源

javascript: document.referrer

14. 屏蔽功能键 Shift,Alt,Ctrl

function look() {
     
  if (event.shiftKey) {
     
    alert("禁止按 Shift 键!"); //可以换成 ALT CTRL
  }
}
document.onkeydown = look;

15. 网页不会被缓存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 或者< META HTTP-EQUIV="expires" CONTENT="0">

16. 怎样让表单没有凹凸感?

 <input type="text" style="border: 1px solid #000000"/> 

17. 让弹出窗口总是在最上面:

<body onblur="this.focus();">

18. 不要滚动条?

让竖条没有:
<body style="overflow:scroll;overflow-y:hidden"> body>
让横条没有:
<body style="overflow:scroll;overflow-x:hidden"> body>
两个都去掉?更简单了
<body scroll="no">
body>

19. 怎样去掉图片链接点击后,图片周围的虚线

<a href="#" onFocus="this.blur()">< img src="logo.jpg" border=0>a>

20. 在打开的子窗口刷新父窗口的代码里如何写

window.opener.location.reload()

21. 在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<style>
body
{
      background-image:url(logo.gif); 
background-repeat:no-repeat; 
background-position:center;
background-attachment: fixed}
style>

22. 脚本永不出错

function killErrors() {
     
return true;
}
window.onerror = killErrors;

23. li重叠边框怎样处理

  • name
  • sex
  • age
/*以下解决方案:*/ li { border: 1px solid #FF0000; margin-top: -1px; } /*li:hover { border: 1px solid #0000FF; position: relative; z-index: 200; }*/

24. 解决手机端border1px变粗的问题

<div class="ui-border-top">
    <h1>Hello Everyoneh1>
div>
<style>
    /* 举个例子,现在要做一个上边框 border-top ,这里是用了伪类元素:before来模拟这条上边框,  ~border-top*/

    div.ui-border-top:before {
      
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        height: 1px;
        width: 100%;
        /*background-color: #c8c7cc;*/
        background-color: red;
        display: block;
        -webkit-transform-origin: 50%0%;
        transform-origin: 50%0%;
    }
    /* 然后就需要根据不同的屏来缩放大小,如下:*/
    /*// 2倍高清屏*/

    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      
        div.ui-border-top:before {
      
            -webkit-transform: scaleY(0.5);
            /*//因为这里只需要缩放y轴*/
            transform: scaleY(0.5);
        }
    }
    /*// 3倍高清屏*/

    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      
        div.ui-border-top:before {
      
            -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
        }
    }
style>

25. 数组对象去重

<script>
    var arr = [{
     
      "id": 11,
      "name": "ZYTX",
      "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
      "gender": "AAAAAA.doc"
    }, {
     
      "id": 12,
      "name": "ZYTA",
      "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
      "gender": "BBBBBB.doc"
    }, {
     
      "id": 13,
      "name": "ZDTX",
      "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
      "gender": "CCCCCC.doc"
    }, {
     
      "id": 13,
      "_checked": true,
      "name": "ZYTX",
      "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
      "gender": "AAAAAA.doc"
    }];
    var hash = {
     };
    arr = arr.reduce(function (item, next, index) {
     
      if(hash[next.id]){
     
        if(next._checked){
     
          item.map((obj,index)=>{
     
            if(obj.id == next.id){
      //此处是以id进行去重
              item.splice(index,1)
              hash[next.id] = true
              item.push(next)
            }
          })
        }
      }else{
     
        hash[next.id] = true
        hash[next._checked] = false
        item.push(next)
      }
      return item
    }, [])
    console.log(arr);
  </script>

26. 获取当月多少天

<script>
    function getCountDays() {
     
            var curDate = new Date();
            /* 获取当前月份 */
            var curMonth = curDate.getMonth();
        /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
        curDate.setMonth(curMonth + 1);
        /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
        curDate.setDate(0);
        /* 返回当月的天数 */
        console.log( curDate.getDate());
        return curDate.getDate();
        
    }
    //例如,  获取当前月份(现在是6月)的总天数: 
    getCountDays()       // 返回30
</script>

文中如有错误,欢迎在评论区指正,如果这篇文章帮助到了你,欢迎点赞和关注。

你可能感兴趣的:(es7/8,javascript)