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

最新推荐文章于 2024-05-02 18:12:22 发布

前端加油站

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量260

点赞数

分类专栏：工具类文章标签： javascript

本文链接：https://blog.csdn.net/Gas_station/article/details/107685973

版权

工具类专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

<table border oncontextmenu=return(false)>< td>no</td></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. 查看网页源代码

<input type=button value=查看网页源代码 οnclick="window.location = "view-source:"+ 'http://xxx'"/>

12. 删除时确认

<a href="javascript:if(confirm(" 确 实 要 删 除 吗 ?")) location="boos.asp?&areyou= 删 除 &page=1"">删除< /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"/>或
<input type="text" style= "border-left:none; border-right:none; border-top:none; border-bottom:1 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重叠边框怎样处理

<div>
    <ul>
        <li>name</li>
        <li>sex</li>
        <li>age</li>
    </ul>
</div>
/*以下解决方案:*/
 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 Everyone</h1>
</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>

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

前端加油站

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
26种你可能想不到的JS技巧

1. οncοntextmenu=“window.event.returnValue=false” 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)>< td>no</td></table>2. 取消选取、防止复制<body onselectstart="return false"></body>3. 不准粘贴 οnpaste="return false"4. 防止复
复制链接

扫一扫