论坛宽幅帖子左偏移量估算
本帖最后由 马黑黑 于 2022-4-4 14:37 编辑 <br /><br /><style type="text/css">#outbox { margin: auto; width: 400px;}
#outbox p { padding: 8px 0; }
#outbox h2 {font: bold 1.2em /1.2em Sans-serif; }
#kuandu { margin: 10px; padding: 4px;border: 1px solid; out-line:0; appearance: none;}
#zhong { outline: none; color: white; background: olive; border-radius: 4px; }
#jieguo { margin: 10px; color: deeppink; }
</style>
<div id="outbox">
<h2>论坛宽幅帖子左偏移量估算</h2>
<input type="number" name="name" value="" id="kuandu" placeholder="请输入帖子宽度数值" />
<input type="button" value=" 中 "id="zhong" />
<div id="jieguo"></div>
<hr />
<p>说明：<br><br>① 说估算就是估算，算法不够科学，将就着用吧。估算是有假定的，主要是帖子最外层盒子是没有内边距、外边距和边框等数值设定，如果有这些设定，结果会有细小误差。<br><br>② 帖子的宽度不宜超过1600px，但作为测试，可以在本测试程序试着输入大一点的数字玩玩。<br><br>③ 文本框不接受粘贴，请手动输入数字。数字以外的部分字符可以输入，提交后估算程序会处理掉。<br><br>④ 估算程序提供的建议仅供参考，实际做帖时应根据效果调整修改。</p>
</div>
<script language="javascript">
let kd = document.getElementById("kuandu");
let jg = document.getElementById("jieguo");
kd.onpaste = function() { return false; }
document.getElementById('zhong').onclick = function() { chkNum(kd.value); }
kd.oninput = function() {
this.value = this.value.replace(/[^0-9]+/, "");
}
function chkNum(num) {
if(num<=780) {
jg.innerHTML = "亲 尺寸小呢无需偏移哦";
} else if(num > 1920) {
jg.innerHTML = "亲 这么大的尺寸去火星论坛做吧";
} else {
if(num >= 1000) {
num = (num-960)/2 + 182;
}else {
num = (num-760)/2;
}
jg.innerHTML = "亲 建议的左移量是 left: -" + num + "px";
}
}
</script>
页:
[1]
2