星空网 > 软件开发 > Java

js 宽窄屏切换效果优化感悟

源代码:

优化前: 

优化后代码:

 

 

<script type="text/javascript">

var oCr = document.getElementById("contentRight");

var oWide = document.getElementById("wide");

var oNarrow = document.getElementById("narrow");

var timer1;

var timer2;

var p = oCr.offsetWidth;

function closeCR() {

if (p > 0) {

p -= 5;

oCr.style.width = p + "px"

} else {

clearInterval(timer1);

}

}

function openCR() {

if (p > 195) {

clearInterval(timer2);

} else {

p += 5;

oCr.style.width = p + "px"

}

}

oWide.onclick = function () {

if (p > 0) {

clearInterval(timer2);

}

timer1 = setInterval("closeCR()", 10);

oNarrow.style.display = "block";

}

oNarrow.onclick = function () {

clearInterval(timer1);

timer2 = setInterval("openCR()", 10);

oNarrow.style.display = "none";

}

</script>

<script type="text/javascript">

//宽窄屏切换

var oCr = document.getElementById("contentRight");

var oWide = document.getElementById("wide");

var oNarrow = document.getElementById("narrow");

var timer1;

var p = oCr.offsetWidth, viewWidth = p;

function changeCR( ratio) {

p = p + ratio*4;

oCr.style.width = p + "px";

if(p > viewWidth || p<0) {

clearInterval(timer1);

}

}

oWide.onclick = function () {

timer1 = setInterval("changeCR(-1)", 10);

oNarrow.style.display = "block";

};

oNarrow.onclick = function () {

timer1 = setInterval("changeCR(1)", 10);

oNarrow.style.display = "none";

}

</script>

 

 

1.可使用坐标系分析判断条件的节点以及判断的值域。当无法确定判断的值域时,检查判断是否必要

   

2.不直接使用 offsetWidth 作为判断的条件。元素的 offsetWidth 值是动态计算的, 使用该值时尽量先使用变量存储,避免再次计算。




原标题:js 宽窄屏切换效果优化感悟

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

吉特跨境:https://www.goluckyvip.com/tag/34358.html
吉祥邮:https://www.goluckyvip.com/tag/34359.html
吉新国际:https://www.goluckyvip.com/tag/34360.html
吉亚供应链:https://www.goluckyvip.com/tag/34361.html
吉易电商学院:https://www.goluckyvip.com/tag/34362.html
吉易跨境:https://www.goluckyvip.com/tag/34363.html
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流