罗马数字和阿拉伯数字互转（源码）

最新推荐文章于 2022-01-20 19:38:12 发布

shimh_凉茶

最新推荐文章于 2022-01-20 19:38:12 发布

阅读量1.5k

点赞数 1

分类专栏： javaScript基础文章标签： javaScript JS 罗马数字转换

本文链接：https://blog.csdn.net/weixin_34403976/article/details/88620721

版权

javaScript基础专栏收录该内容

63 篇文章 0 订阅

订阅专栏

罗马数字和阿拉伯数字互转（源码）

将下面源码全部复制下来直接粘贴到html页面试一下，代码还有许多需要改进的地方，请各位大神多多指点，谢谢！

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>宇宙货币转换器</title>
  <style>
    div {
      font-size: 20px
    }
    .showBox,.btnBox,h1 {
      overflow: hidden;
      width: 600px;
      padding: 0;
      margin: 0;
      color: #333
    }
    ul {
      list-style-type: none;
    }
    li {
      float: left;
      line-height: 80px;
      height: 80px;
    }
    .lab {
      text-align: right;
      width:40%;
    }
    .Txt {
      width: 60%;
    }
    .ipt {
      width: 90%;
      height: 40px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 24px;
      padding: 0 10px;
    }
    .txtBox {
      width: 90%;
      height: 40px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 24px;
      padding: 0 10px;
      background: #f8f8f8
    }
    .btnBox {
      text-align: center;
    }
    .btnBox>button {
      display: inline-block;
      height: 40px;
      font-size: 20px;
      line-height: 40px;
      padding: 0 20px;
      border-radius:5px;
      border: none;
      background: #00CCFF;
      outline: none;
    }
    .btnBox>button:active {
      background: #00CCCC;
    }
    button>span {
      color: red;
    }
    h1 {
      padding-bottom: 30px;
      text-align: center;
    }
    .cont {
      float: left;
      padding: 30px 10px 50px;
      border: 3px solid #999;
      border-radius:20px;
    }
    .test {
      text-align: center;
      color: red;
      font-size: 22px;
      height: 30px;
      line-height: 30px;
      /* display: none; */
    }
  </style>
</head>
<body>
  <div class="cont">
    <h1>宇宙货币转换器</h1>
    <div id="test" class="test"></div>
    <ul class="showBox">
      <li class="lab"><span type1>阿拉伯数字</span>：</li>
      <li class="Txt">
        <input type="text" class="ipt" placeholder="请输入金额" id="setIpt" onkeyup="window._o.flag==0 ? (value=value.replace(/[^\d]/g,'')) : value=value.toUpperCase()">
      </li>
      <li class="lab"><span type2>罗马数字</span>：</li>
      <li class="Txt">
        <input type="text" class="txtBox" id="showIpt" readonly>
      </li>
    </ul>
    <div class="btnBox">
      <button id="_exChange">切换为 <span type2>罗马数字</span> 转 <span type1>阿拉伯数字</span></button>
      <button id="_clear">清除</button>
      <button id="_switch">计算</button>
    </div>
    
  </div>
</body>
<script>
  (function(_win){
    let _set = document.querySelector('#setIpt'),
        _show = document.querySelector('#showIpt'),
        _switch = document.querySelector('#_switch'),
        _clear = document.querySelector('#_clear'),
        _exChange = document.querySelector('#_exChange'),
        type1 = document.querySelectorAll('[type1]'),
        type2 = document.querySelectorAll('[type2]'),
        _test = document.querySelector('#test')
    let o = {
      flag: 0, // 0:转 罗马数字 1:转 阿拉伯数字
      type: ['罗马数字','阿拉伯数字'],
      _box:['I','V','X','L','C','D','M'],
      test_box:[
        'IIII','XXXX','CCCC','MMMM','DD','LL','VV',
        'IIV','IIX','XXL','XXC','CCD','CCM',
        'IL','IC','ID','IM','XD','XM',
        'IVI','IXI','XLX','XCX','CDC','CMC',
        'VX','VL','VC','VD','VM','LC','LD','LM','DM',
        ],
      _symbol:[
        ['','I','II','III','IV','V','VI','VII','VIII','IX'],
        ['','X','XX','XXX','XL','L','LX','LXX','LXXX','XC'],
        ['','C','CC','CCC','CD','D','DC','DCC','DCCC','CM'],
        ['','M','MM','MMM']
      ],
      clear() {
        _set.value = ''
        _show.value = ''
        _set.focus()
      },
      Rome() {  // 转罗马
        let _val = _set.value,
             l = _val.length,
           _v1 = Number(l>0 ? _val.slice(l-1,l) : 0),
           _v2 = Number(l>1 ? _val.slice(l-2,l-1) : 0),
           _v3 = Number(l>2 ? _val.slice(l-3,l-2) : 0),
           _v4 = Number(l>3 ? _val.slice(0,l-3) : 0),
            _v = Number('' + _v4 + _v3 + _v2 + _v1)
        if( _v <= 0) {
          _test.innerText = '请输入大于0的整数！'
          o.clear()
          return
        }else if( _v >= 4000) {
          _test.innerText = '本题仅支持小于4000的正整数，请重新输入!'
          o.clear()
          return
        }
        let m1 = o._symbol[0][_v1],
            m2 = o._symbol[1][_v2],
            m3 = o._symbol[2][_v3],
            m4 = o._symbol[3][_v4]
        _show.value = '' + m4 + m3+ m2 + m1
      },
      Arab() {  // 转阿拉伯
        let _val = _set.value,
               l = _val.length,
             con = _val.split(''),
           _bool = false,
          symStr = '',
       symStrAll = [],
        reduce_l = 0
        con.forEach((d)=> {
          if(!o._box.includes(d)) {
            _bool = true
          }
        })
        if(_bool) {
          _test.innerText = '请输入合法的罗马字符！'
          o.clear()
          return
        }
        function querySym(str,ind) {
          str--
          symStr = l>str ? _val.slice(l-str-1,l-reduce_l) : ''
          if(o.test_box.includes(symStr)) {
            _test.innerText = '请输入合法的罗马字符！'
            setTimeout(()=>{
              o.clear()
            })
            return
          }
          let setObj = {
              index: ind,
              val: o._symbol[ind].indexOf(symStr) == -1 ? 0 : o._symbol[ind].indexOf(symStr)
            }
          if(o._symbol[ind] && o._symbol[ind].includes(symStr)) {
            symStrAll[ind] = setObj
            ind++
            reduce_l = reduce_l + symStr.length
            return
          }else {
            symStrAll[ind] = setObj
          }
          if(str==0) return
          querySym(str,ind)
        }
        o._symbol.forEach((d,i)=>{
          querySym(l,i)
        })
        // 赋值
        let lastStr = []
        symStrAll.forEach((v,i)=> {
          lastStr[i] = v.val
        })
        _show.value = Number(lastStr.reverse().toString().replace(/,/g,'')) || ''
      }
    }
    _win._o = o
    // switch
    _switch.onclick = function (e) {
      o.flag == 0 ? o.Rome() : o.Arab()
    }
    _set.oninput = function (e) {
      this.value = this.value.trim()
      _show.value = ''
      _test.innerText = ''
    }
    // clear
    _clear.onclick = function () {
      o.clear()
    }
    // exChange
    _exChange.onclick = function () {
      o.clear()
      o.flag = o.flag ? 0 : 1
      type1.forEach((s,i)=> {
        s.innerText = o.type[o.flag ? 0 : 1]
      })
      type2.forEach((s,i)=> {
        s.innerText = o.type[o.flag]
      })
    }
  })(window)
</script>
</html>

希望大家多多支持，多多关注！谢谢！

shimh_凉茶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
罗马数字和阿拉伯数字互转（源码）

罗马数字和阿拉伯数字互转（源码）将下面源码全部复制下来直接粘贴到html页面试一下，代码还有许多需要改进的地方，请各位大神多多指点，谢谢！&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=
复制链接

扫一扫