头部背景图

JavaScript月历问题?htmi5中js怎么改左偏移

2022-08-09 19:03:48 :28
最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)一般来说一个页面中所有元素的父级参照物都是bodydocument.body.offsetParent // null想要改变父级参照物需要通过position定位来

最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)一般来说一个页面中所有元素的父级参照物都是bodydocument.body.offsetParent // null想要改变父级参照物需要通过position定位来进行改变(absolute relative fixed 都可以进行改变  )《!DOCTYPE html》 《html》 《head》   《meta charset=“UTF-8“》   《title》Document《/title》   《style》     *{       margin:0;       padding:0;     }     #outer{       width:180px;       height:180px;       margin:50px auto;       border:10px solid #000;       background:orange;       padding:50px;     }     #inner{       width:80px;       height:80px;       padding:50px;       border:10px solid #000;       background:green;     }     #center{       width:50px;       height:50px;       border:10px solid #000;       background:red;     }   《/style》 《/head》 《body》   《div id=“outer“》     《div id=“inner“》       《div id=“center“》《/div》     《/div》   《/div》   《script》     var outer = document.getElementById(’outer’);     var inner = document.getElementById(’inner’);     var center = document.getElementById(’center’);     outer.style.position = “relative“;//这样inner和center的参照物都是outer     center.offsetParent//outer     inner.offsetParent//outer     outer.offsetParent//body     outer.style.position = “relative“;//     inner.style.position = “relative“;     center.offsetParent//inner     inner.offsetParent//outer     outer.offsetParent//body   《/script》 《/body》 《/html》3、offsetTop/offsetLeft :当前元素(外边框)距离其父级参照物(内边框)的偏移距离具体如下图所示:下面是一个offset方法:等同于jQuery中的offset方法,undefined是连这个属性都不存在//例如     document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲)     document.parentnode//undefined (因为没有parentnode这个属性)1、parentNode:父亲节点  HTML结构层级关系中的上一级元素var outer = document.getElementById(’outer’);     var inner = document.getElementById(’inner’);     var center = document.getElementById(’center’);     center.parentNode //inner 2、offsetParent:父级参照物 在同一个平面中,我们就把父级参照物的边框和偏移也进行累加       while(par){         if(navigator.userAgent.indexOf(“MSIE 8.0“)===-1){           //累加父级参照物的边框           totalLeft+=par.clientLeft;           totalTop+=par.clientTop         }                  //累加父级参照物本身的偏移         totalLeft+=par.offsetLeft;         totalTop+=par.offsetTop         par = par.offsetParent;       }       return{         left:totalLeft,         top:totalTop       }     }     console.log(offset(center).left),获取的一个结果是一个对象{left:距离BODY的左偏移,所以我们不需要自己在单独加边框了代码如下:  function offset(curEle){       var totalLeft = null,totalTop = null,par = curEle.offsetParent;       //首先加自己本身的左偏移和上偏移       totalLeft+=curEle.offsetLeft;       totalTop+=curEle.offsetTop       //只要没有找到body,top:距离BODY的上偏移}在标准的IE8浏览器中,距离body的偏移(包含左偏移和上偏移)。

JavaScript月历问题


var gMonths=new Array(“一月“,“二月“,“三月“,“四月“,“五月“,“六月“,“七月“,“八月“,“九月“,“十月“,“十一月“,“十二月“);
var WeekDay=new Array(“日“,“一“,“二“,“三“,“四“,“五“,“六“);
var strToday=“今天“;
var strYear=“年“;
var strMonth=“月“;
var strDay=“日“;
var splitChar=“-“;
var startYear=2010;
var endYear=2020;
var dayTdHeight=12;
var dayTdTextSize=12;
var gcNotCurMonth=“#E0E0E0“;
var gcRestDay=“#FF0000“;
var gcWorkDay=“#444444“;
var gcMouseOver=“#79D0FF“;
var gcMouseOut=“#F4F4F4“;
var gcToday=“#444444“;
var gcTodayMouseOver=“#6699FF“;
var gcTodayMouseOut=“#79D0FF“;
var gdCtrl=new Object();
var goSelectTag=new Array();
var gdCurDate=new Date();
var giYear=gdCurDate.getFullYear();
var giMonth=gdCurDate.getMonth()+1;
var giDay=gdCurDate.getDate();
function $(){var elements=new Array();for(var i=0;i《arguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])==’string’){element=document.getElementById(arguments[i]);}if(arguments.length==1){return element;}elements.Push(element);}return elements;}
Array.prototype.Push=function(){var startLength=this.length;for(var i=0;i《arguments.length;i++){this[startLength+i]=arguments[i];}return this.length;}
String.prototype.HexToDec=function(){return parseInt(this,16);}
String.prototype.cleanBlank=function(){return this.isEmpty()?““:this.replace(/\s/g,““);}
function checkColor(){var color_tmp=(arguments+““).replace(/\s/g,““).toUpperCase();var model_tmp1=arguments.toUpperCase();var model_tmp2=“rgb(“+arguments.substring(1,3).HexToDec()+“,“+arguments.substring(1,3).HexToDec()+“,“+arguments.substring(5).HexToDec()+“)“;model_tmp2=model_tmp2.toUpperCase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}
function $V(){return $(arguments).value;}
function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=true;gdCtrl=dateCtrl;fSetYearMon(giYear,giMonth);var point=fGetXY(popCtrl);with($(“calendardiv“).style){left=point.x+“px“;top=(point.y+popCtrl.offsetHeight+1)+“px“;visibility=’visible’;zindex=’99’;position=’absolute’;}$(“calendardiv“).focus();}
function fSetDate(iYear,iMonth,iDay){var iMonthNew=new String(iMonth);var iDayNew=new String(iDay);if(iMonthNew.length《2){iMonthNew=“0“+iMonthNew;}if(iDayNew.length《2){iDayNew=“0“+iDayNew;}gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNew;fHideCalendar();}
function fHideCalendar(){$(“calendardiv“).style.visibility=“hidden“;for(var i=0;i《goSelectTag.length;i++){goSelectTag[i].style.visibility=“visible“;}goSelectTag.length=0;}
function fSetSelected(){var iOffset=0;var iYear=parseInt($(“tbSelYear“).value);var iMonth=parseInt($(“tbSelMonth“).value);var aCell=$(“cellText“+arguments);aCell.bgColor=gcMouseOut;with(aCell){var iDay=parseInt(innerHTML);if(checkColor(style.color,gcNotCurMonth)){iOffset=(innerHTML》10)?-1:1;}iMonth+=iOffset;if(iMonth《1){iYear--;iMonth=12;}else if(iMonth》12){iYear++;iMonth=1;}}fSetDate(iYear,iMonth,iDay);}
function Point(iX,iY){this.x=iX;this.y=iY;}
function fBuildCal(iYear,iMonth){var aMonth=new Array();for(var i=1;i《7;i++){aMonth[i]=new Array(i);}var dCalDate=new Date(iYear,iMonth-1,1);var iDayOfFirst=dCalDate.getDay();var iDaysInMonth=new Date(iYear,iMonth,0).getDate();var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1;var iDate=1;var iNext=1;for(var d=0;d《7;d++){aMonth[d]=(d《iDayOfFirst)?(iOffsetLast+d)*(-1):iDate++;}for(var w=2;w《7;w++){for(var d=0;d《7;d++){aMonth[w][d]=(iDate《=iDaysInMonth)?iDate++:(iNext++)*(-1);}}return aMonth;}
function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){var colorTD=“ bgcolor=’“+gcMouseOut+“’ bordercolor=’“+gcMouseOut+“’“;var styleTD=“ valign=’middle’ align=’center’ style=’height:“+iCellHeight+“px;font-weight:bolder;font-size:“+iDateTextSize+“px;“;var dateCal=““;dateCal+=“《tr》“;for(var i=0;i《7;i++){dateCal+=“《td“+colorTD+styleTD+“color:#990099’》“+WeekDay[i]+“《/td》“;}dateCal+=“《/tr》“;for(var w=1;w《7;w++){dateCal+=“《tr》“;for(var d=0;d《7;d++){var tmpid=w+““+d;dateCal+=“《td“+styleTD+“cursor:pointer;’ onclick=’fSetSelected(“+tmpid+“)’》“;dateCal+=“《span id=’cellText“+tmpid+“’》《/span》“;dateCal+=“《/td》“;}dateCal+=“《/tr》“;}return dateCal;}
function fUpdateCal(iYear,iMonth){var myMonth=fBuildCal(iYear,iMonth);var i=0;for(var w=1;w《7;w++){for(var d=0;d《7;d++){with($(“cellText“+w+““+d)){parentNode.bgColor=gcMouseOut;parentNode.borderColor=gcMouseOut;parentNode.onmouseover=function(){this.bgColor=gcMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcMouseOut;};if(myMonth[w][d]《0){style.color=gcNotCurMonth;innerHTML=Math.abs(myMonth[w][d]);}else{style.color=((d==0)||(d==6))?gcRestDay:gcWorkDay;innerHTML=myMonth[w][d];if(iYear==giYear && iMonth==giMonth && myMonth[w][d]==giDay){style.color=gcToday;parentNode.bgColor=gcTodayMouseOut;parentNode.onmouseover=function(){this.bgColor=gcTodayMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcTodayMouseOut;};}}}}}}
function fSetYearMon(iYear,iMon){$(“tbSelMonth“).options[iMon-1].selected=true;for(var i=0;i《$(“tbSelYear“).length;i++){if($(“tbSelYear“).options[i].value==iYear){$(“tbSelYear“).options[i].selected=true;}}fUpdateCal(iYear,iMon);}
function fPrevMonth(){var iMon=$(“tbSelMonth“).value;var iYear=$(“tbSelYear“).value;if(--iMon《1){iMon=12;iYear--;}fSetYearMon(iYear,iMon);}
function fNextMonth(){var iMon=$(“tbSelMonth“).value;var iYear=$(“tbSelYear“).value;if(++iMon》12){iMon=1;iYear++;}fSetYearMon(iYear,iMon);}
function fGetXY(aTag){var oTmp=aTag;var pt=new Point(0,0);do{pt.x+=oTmp.offsetLeft;pt.y+=oTmp.offsetTop;oTmp=oTmp.offsetParent;}while(oTmp.tagName.toUpperCase()!=“BODY“);return pt;}
function getDateDiv(){var noSelectForIE=““;var noSelectForFireFox=““;if(document.all){noSelectForIE=“onselectstart=’return false;’“;}else{noSelectForFireFox=“-moz-user-select:none;“;}var dateDiv=““;dateDiv+=“《div id=’calendardiv’ onclick=’event.cancelBubble=true’ “+noSelectForIE+“ style=’“+noSelectForFireFox+“position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;’》“;dateDiv+=“《table border=’0’ bgcolor=’#E0E0E0’ cellpadding=’1’ cellspacing=’1’ 》“;dateDiv+=“《tr》“;dateDiv+=“《td》《input type=’button’ id=’PrevMonth’ value=’《’ style=’height:20px;width:20px;font-weight:bolder;’ onclick=’fPrevMonth()’》“;dateDiv+=“《/td》《td》《select id=’tbSelYear’ style=’border:1px solid;’ onchange=’fUpdateCal($V(\“tbSelYear\“),$V(\“tbSelMonth\“))’》“;for(var i=startYear;i《endYear;i++){dateDiv+=“《option value=’“+i+“’》“+i+strYear+“《/option》“;}dateDiv+=“《/select》《/td》《td》“;dateDiv+=“《select id=’tbSelMonth’ style=’border:1px solid;’ onchange=’fUpdateCal($V(\“tbSelYear\“),$V(\“tbSelMonth\“))’》“;for(var i=0;i《12;i++){dateDiv+=“《option value=’“+(i+1)+“’》“+gMonths[i]+“《/option》“;}dateDiv+=“《/select》《/td》《td》“;dateDiv+=“《input type=’button’ id=’NextMonth’ value=’》’ style=’height:20px;width:20px;font-weight:bolder;’ onclick=’fNextMonth()’》“;dateDiv+=“《/td》“;dateDiv+=“《/tr》《tr》“;dateDiv+=“《td align=’center’ colspan=’4’》“;dateDiv+=“《div style=’background-color:#cccccc’》《table width=’100%’ border=’0’ cellpadding=’3’ cellspacing=’1’》“;dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize);dateDiv+=“《/table》《/div》“;dateDiv+=“《/td》“;dateDiv+=“《/tr》《tr》《td align=’center’ colspan=’4’ nowrap》“;dateDiv+=“《span style=’cursor:pointer;font-weight:bolder;’ onclick=’fSetDate(giYear,giMonth,giDay)’ onmouseover=’this.style.color=\““+gcMouseOver+“\“’ onmouseout=’this.style.color=\“#000000\“’》“+strToday+“:“+giYear+strYear+giMonth+strMonth+giDay+strDay+“《/span》“;dateDiv+=“《/tr》《/tr》“;dateDiv+=“《/table》《/div》“;return dateDiv;}
with(document){onclick=fHideCalendar;write(getDateDiv());}
《td 》费用发生日期:*《/td》
《td》《label》

《input type=“text“ name=“date“ style=“border:1px solid #999;“ onClick=“fPopCalendar(event,this,this)“ onFocus=“this.select()“ readonly=“readonly“ /》
*
《/label》《/td》

htmi5中js怎么改左偏移


前言:以前一直是看别人写的,然后学习点东西,现在也把自己的学习记录下来,给大家一个学习的机会,欢迎大家多多评论和推荐哈,共同进步。竟然还有六个人关注我了 ,哈哈 开心。我会继续写下去的。。

null和undefined都代表没有,但是null是属性存在值不存在,undefined是连这个属性都不存在

//例如     document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲)     document.parentnode//undefined (因为没有parentnode这个属性)

1、parentNode:父亲节点  HTML结构层级关系中的上一级元素

var outer = document.getElementById(’outer’);     var inner = document.getElementById(’inner’);     var center = document.getElementById(’center’);     center.parentNode //inner

2、offsetParent:父级参照物 在同一个平面中,最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)

一般来说一个页面中所有元素的父级参照物都是body

document.body.offsetParent // null

想要改变父级参照物需要通过position定位来进行改变(absolute relative fixed 都可以进行改变  )

《!DOCTYPE html》 《html》 《head》   《meta charset=“UTF-8“》   《title》Document《/title》   《style》     *{       margin:0;       padding:0;     }     #outer{       width:180px;       height:180px;       margin:50px auto;       border:10px solid #000;       background:orange;       padding:50px;     }     #inner{       width:80px;       height:80px;       padding:50px;       border:10px solid #000;       background:green;     }     #center{       width:50px;       height:50px;       border:10px solid #000;       background:red;     }   《/style》 《/head》 《body》   《div id=“outer“》     《div id=“inner“》       《div id=“center“》《/div》     《/div》   《/div》   《script》     var outer = document.getElementById(’outer’);     var inner = document.getElementById(’inner’);     var center = document.getElementById(’center’);     outer.style.position = “relative“;//这样inner和center的参照物都是outer     center.offsetParent//outer     inner.offsetParent//outer     outer.offsetParent//body     outer.style.position = “relative“;//     inner.style.position = “relative“;     center.offsetParent//inner     inner.offsetParent//outer     outer.offsetParent//body   《/script》 《/body》 《/html》

3、offsetTop/offsetLeft :当前元素(外边框)距离其父级参照物(内边框)的偏移距离

具体如下图所示:

下面是一个offset方法:等同于jQuery中的offset方法,实现获取页面中任意一个元素,距离body的偏移(包含左偏移和上偏移),不管当前元素的父级参照物是谁。获取的一个结果是一个对象{left:距离BODY的左偏移,top:距离BODY的上偏移}

在标准的IE8浏览器中,我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内了。所以我们不需要自己在单独加边框了

代码如下:  

function offset(curEle){       var totalLeft = null,totalTop = null,par = curEle.offsetParent;       //首先加自己本身的左偏移和上偏移       totalLeft+=curEle.offsetLeft;       totalTop+=curEle.offsetTop       //只要没有找到body,我们就把父级参照物的边框和偏移也进行累加       while(par){         if(navigator.userAgent.indexOf(“MSIE 8.0“)===-1){           //累加父级参照物的边框           totalLeft+=par.clientLeft;           totalTop+=par.clientTop         }                  //累加父级参照物本身的偏移         totalLeft+=par.offsetLeft;         totalTop+=par.offsetTop         par = par.offsetParent;       }       return{         left:totalLeft,         top:totalTop       }     }     console.log(offset(center).left)


本文编辑:soogor
暂无评论,期待你的首评
Copyright © 2022 All Rights Reserved 山东上格信息科技有限公司 版权所有

鲁ICP备20007704号

Thanks for visiting my site.