26种你可能想不到的JS技巧
程序员文章站
2023-12-21 22:48:40
...
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>
文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。