HTML问题解决笔记

• 获取一组图片的名字

<div id="hpic">
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
</div>
<script>
$(function(){
    var img = $("#hpic img");
    img.each(function(e,img){
        var src = img.src.split('/').pop();
        console.log(src);
    });
})
</script>

• 排版-居中散开

<div class="hk1">
    <div>-----------------------◆</div>
    <div class="hk2">居中散开</div>
    <div>◆-----------------------</div>
</div>
<style>
    .hk1{
        margin: 0 auto;
        width: 300px;height: 100px;
        background-color: orange;
        display: flex;
        display: -webkit-flex; /* Safari */
        flex-flow:row nowrap;
        justify-content:center; /* 水平居中 */
        align-items:center; /* 垂直居中 */
        white-space:nowrap; /* 不换行 */
        overflow: hidden;
    }
   .hk1 .hk2{ margin: 20px }
</style>

• 使input只能输入小数点和数字

1、简单版
<input onkeyup="if(isNaN(value))execCommand('undo')">

2、正则表达式替换
<input name="num">
<script>
$("input[name='num']").on("input",function(){
    //先把非数字的都替换掉，除了数字和.
    this.value =this.value.replace(/[^\d.]/g,"");
    //必须保证第一个为数字而不是.
    this.value = this.value.replace(/^\./g,"");
    //保证只有出现一个.而没有多个.
    this.value = this.value.replace(/\.{2,}/g,".");
    console.log(this.value);
    //保证.只出现一次，而不能出现两次以上
    return this.value = this.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
})
</script>

• 移除input在type=”number”时的上下小箭头1

<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        -webkit-appearance: none !important; /* chrome */
    }
    input[type="number"]{-moz-appearance:textfield;} /* Firefox */
</style>

---

1. hide number input’s spin box. ↩