一些CSS/JS小技巧
CSS部分
1、文本框不可点击
.inputDisabled{ background-color: #eee;cursor: not-allowed;}
2、禁止复制粘贴
onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false"
JS部分
1、实现复选框部分选中状态
<input id="chk1" type="checkbox" />
<script>
document.getElementById('chk1').indeterminate = true;
</script>
2、浅拷贝 参考:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
3、深拷贝 参考:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}
4、生成lowerValue(包括)到 upperValue(包括)的随机整数。
function selectFrom(lowerValue, upperValue) {
var choices = upperValue - lowerValue + 1;
return Math.floor(Math.random() * choices + lowerValue);
}
5、确定属性是原型中的属性
function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name) && (name in object);
}
6、跨浏览器取得窗口左边和上边的位置
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
7、获取地址栏参数
/*
获取页面url参数
调用方法:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
*/
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
/*
获取页面url参数
调用方法:
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request['参数1'];
参数2 = Request['参数2']; */
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
8、计算元素在页面的偏移量
//左偏移量
function getElementLeft(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
//上偏移量
function getElementTop(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
9、判断浏览器类型
function getBrowserType() {
var ua = navigator.userAgent.toLowerCase(), browserType = "";
if (window.ActiveXObject) {
//Sys.ie = ua.match(/msie ([\d.]+)/)[1];
Sys.ie = ua;
browserType = "IE";
}
else if (document.getBoxObjectFor) {
//Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
Sys.firefox = ua;
browserType = "firefox";
}
else if (window.MessageEvent && !document.getBoxObjectFor) {
//Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
Sys.chrome = ua;
browserType = "chrome";
}
else if (window.opera) {
//Sys.opera = ua.match(/opera.([\d.]+)/)[1];
Sys.opera = ua;
browserType = "opera";
}
else if (window.openDatabase) {
//Sys.safari = ua.match(/version\/([\d.]+)/)[1];
Sys.safari = ua;
browserType = "safari";
}
return browserType;
}
一些CSS/JS小技巧的更多相关文章
- html/css/js小技巧实例
一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...
- CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- 第八十四节,css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- js小技巧总结
js小技巧总结 1.Array.includes条件判断 function test(fruit) { const redFruits = ["apple", "stra ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- javascript小技巧-js小技巧收集(转)
本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...
- 一些常用的html/CSS效果---小技巧
我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...
随机推荐
- STL_deque双端队列
deque:元素数据采用分块的线性结构存储.若干线性存储块成为deque块.一般大小为512字节,元素的数据类型所占用的字节数,决定了每个deque块可容纳的元素个数. 所有的deque块使用一个Ma ...
- Javaweb之Jsp
1. JSP是什么? JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. 2. JSP带 ...
- 更改Debian Linux里面的EDT时区为CST时区
Debian按默认安装,设置的是EDT时区.这样跟我们的系统就都对不上,因此得 改回CST. 只需要两步即可: 使用vi编辑/etc/timezone,把timezone文件的内容更改为:Asia/S ...
- spring exception
Spring MVC异常处理SimpleMappingExceptionResolver[转] (2012-12-07 13:45:33) 转载▼ 标签: 杂谈 分类: 技术分享 Spring3.0中 ...
- JS入门(一)
在学js之前,我们应该先清楚js是什么,js全称JavaScript.是一门基于对象和事件的,有安全性的脚本语言.所谓脚本语言,就是一行一行执行的,就像剧本一样,一句句的往下读.而对象和事件,则是js ...
- Java基础——第一个记事本代码与Java注释
一 .使用记事本编辑java文件: 1.打开记事本,重命名文件名,文件拓展名“.java”.(必须要的,系统才能识别java文件) 2.编写一个简单的java代码: public class Hell ...
- Struts2学习笔记②
之前在跟着老师们做项目的时候经常会烦恼Struts.xml怎么配置,老师也没讲太清楚,都是说很简单,但是不懂的人就是太难了!哈哈,万事还是要靠自己的! struts.xml今天又看了几个小时的书,也跟 ...
- OnsenUI和AngularJS配合搭建混合应用的基本步骤
混合开发的热潮已经掀起,实现混合开发的方式很多.今天给大家介绍一个实现混合开发的基本方法-OnsenUI和AngularJS配合. OnsenUI是一个可以实现混合开发的前端框架,包含了很多前端设计中 ...
- tp框架之对列表的一系列操作及跳转页面(详细步骤)
依旧是在Main控制器里面写类方法,如果想看tp全部的话,可以从前几篇开始看,都是一整个步骤下来的 在控制器中重新写个类 然后再做个shouye.html页面 nation表的数据,将会在shou.h ...
- iOS开发RunLoop
最近处于离职状态,时间也多了起来,但是学习还是不能放松,今天总结一下RunLoop,RunLoop属于iOS系统层的东西,还是比较重要的. 一.什么是RunLoop 字面意思看是跑圈,也可以看作运行循 ...