js原创常用函数
自己写的经常用到的一些小函数,百分百版权
,有用的着的朋友尽管拿去.
1.标签切换函数
<div id="nav"><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul></div>
<div id="nav_box"><ul><li>aaaaa</li><li>bbbbb</li><li>ccccc</li></ul></div>
<script type="text/javascript">
navMenu('nav','cur');
/**
* 标签切换函数
* nid: 标签ID
* cName: 选中状态下的className
* s: 默认显示第几个下标
* 注意: 如果切换的棱标签ID是 'nav' , 则容器的ID应为 'nav_box'
* 作者: [email protected]
*/
function navMenu(nid,cName,s){
var nav = document.getElementById(nid).getElementsByTagName('li');
var box = document.getElementById(nid+'_box').getElementsByTagName('li');
var Len = nav.length;
if(!s){var s = 0;}
for(var i=0;i<Len;i++){
box[i].style.display='none';
(function(i){
nav[i]. = function(){
for(j=0;j<Len;j++){
nav[j].className = '';
box[j].style.display='none';
};
this.className = cName;
box[i].style.display='';
};
})(i);
}
if(s>=0){
nav[s].className = cName;
box[s].style.display='';
}
}
</script>
2.元素固定在低部
function aa(){
var a = document.getElementById('div_id');
if(!window.XMLHttpRequest){
a.style.position = 'absolute';
a.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight-20+"px";
}else{
a.style.position = 'fixed';
a.style.right = '0';
a.style.bottom = '0';
}
}
setInterval("aa()", 1);
3.元素固定在顶部
function bb() {
var diffY;
if (document.documentElement && document.documentElement.scrollTop){
diffY = document.documentElement.scrollTop;
}else {
diffY = document.body.scrollTop
}
//滚动100后再显示
if (diffY < 100) {
$("Lnav").style.position = '';
$("Lnav").style.top = '0';
$("Lnav").style.left = "0";
}else {
if (window.XMLHttpRequest){
$("Lnav").style.position = 'fixed';
$("Lnav").style.top = "20px";
}else{
$("Lnav").style.position = 'absolute';
$("Lnav").style.top = diffY + "px";
}
}
}
3.计算字符串长度
function str_len(str){
var i,sum;
sum=0;
for(i=0;i<str.length;i++){
if ((str.charCodeAt(i)>=0) && (str.charCodeAt(i)<=255)){
sum = sum + 0.5;
}else{
sum = sum + 1;
}
}
return Math.round(sum);
}
4.批量操作
function selectAll(){
var plist = document.getElementById('product_list').getElementsByTagName('input');
var s = document.getElementById('select_all').checked == true ? true : false;
var len = plist.length;
for(var i=0; i<= len; i++){
if(plist[i]!= undefined && plist[i].type == 'checkbox'){
plist[i].checked = s;
}
}
}
function deleteSelect(){
var plist = document.getElementById(' product_list ').getElementsByTagName('input');
var ids = 0;
var len = plist.length;
for(var i=0; i<= len; i++){
if(plist[i]!= undefined && plist[i].type == 'checkbox' && plist[i].checked == true){
ids += ','+plist[i].value;
}
}
if(!ids){
return alert('请选择!');
}
alert(ids);
}
5.图片宽高自适应
<img onload="img_resize(this,200,100)" ...>
function img_resize(obj,w,h){
var image=new Image();
image.src=obj.src;
if(image.width>0 && image.height>0){
if(image.width>=w){
obj.width=w;
obj.height=image.height*w/image.width;
}
if(obj.height>=h){
obj.height=h;
obj.width=image.width*h/image.height;
}
}
}
6.比较两个字符串是否相等
function compareStr(str1,str2,unUppercase){
if(unUppercase){
str1 = str1.toUpperCase();
str2 = str2.toUpperCase();
if(str1.indexOf(str2)==0 && str2.indexOf(str1)==0){
return true;
}
}else{
if(str1.indexOf(str2)==0 && str2.indexOf(str1)==0){
return true;
}
}
return false;
}
7.离开页面确认代码
window.onbeforeunload = function() {
window.unloadTimer = setInterval("clearInterval(window.unloadTimer);",500);
window.onunload = function() {clearInterval(window.unloadTimer);}
return '确定要离开吗?';
}
8.JSON 二级联动
<div id="test"></div><div id="test2"></div>
var list = {
101:{id:'101', title:'这是标题1', child:{10101:{id:'10101', title:'这是标题101_01'},10102:{id:'10102', title:'这是标题101_02'}}},
103:{id:'102', title:'这是标题2', child:0},
107:{id:'103', title:'这是标题3', child:{10301:{id:'10301', title:'这是标题103_01'},10302:{id:'10302', title:'这是标题103_02'}}}
}
function setSelect(str,id){
document.getElementById(id).innerHTML = str;
}
function setList1(vid){
var list_content1 = '<select id="list1"><option value="0">选择</option>';;
for(var n in list){
var selected = '';
if(vid == n){
selected = 'selected';
}
list_content1 += '<option value="'+n+'" '+selected+'>'+list[n].title+'</optinon>';
}
list_content1 += '</select>';
setSelect(list_content1,'test');
}
function setList2(vid){
var e = document.getElementById('list1');
var id = e.value;
var list_content2 = '<select id="list2"><option value="0">选择</option>';
if(id > 1){
var text = e.options[e.selectedIndex].text;
var child = list[id].child;
if(child ){
for(var n in child){
var selected = '';
if(vid == n){
selected = 'selected';
}
list_content2 += '<option value="'+n+'" '+selected+'>'+child[n].title+'</optinon>';
}
}else{
list_content2 += '<option selected value="'+id+'">'+text+'</optinon>';
}
}
list_content2 += '</select>';
setSelect(list_content2, 'test2');
}
var list1Id = 107;
var list2Id = 10302;
setList1(list1Id);
setList2(list2Id);
var lchange = document.getElementById('list1');
lchange.onchange = setList2;
9.getElementsByClassName 的实现(转载)
function getElementsByClassName(fatherId, tagName, className) {
node = fatherId && document.getElementById(fatherId) || document;
tagName = tagName || "*";
className = className.split(" ");
var classNameLength = className.length;
for (var i = 0,
j = classNameLength; i < j; i++) {
className[i] = new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");
}
var elements = node.getElementsByTagName(tagName);
var result = [];
for (var i = 0,
j = elements.length,
k = 0; i < j; i++) {
var element = elements[i];
while (className[k++].test(element.className)) {
if (k === classNameLength) {
result[result.length] = element;
break;
}
}
k = 0;
}
return result;
}
10.焦点控制层例子
HTML:
<span id="teston">点这里</span>
<ul id="show" style="display: none; " tabindex="0" hidefocus="true">内容内容内容</ul>
JS:
document.getElementById("teston").onclick = function(){
show('show');
}
function show(div_id){
document.getElementById(div_id).style.display="";
document.getElementById(div_id).focus();
document.getElementById(div_id).onblur = function(){
document.getElementById(div_id).style.display="none";
}
}
11.二维数组排序
function objSort(obj, key){
var arr = new Array();
for(j in obj){
arr.push(obj[j]);
}
return arr.sort(function(a, b) {
var x = a[key]; var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
12.计算时间差
function getDays(strDateStart,strDateEnd){
var strSeparator = "-"; //日期分隔符
var oDate1;
var oDate2;
var iDays;
oDate1= strDateStart.split(strSeparator);
oDate2= strDateEnd.split(strSeparator);
var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒数转换为天数
return iDays ;
}
13.XXXXXXXXXX
function