<div class="container main-container"> <h1>进制转换</h1>

---

<form id="hex-con"> <div class="row"> <div class="col-xs-4 col-md-3"> <select class="form-control"> <optgroup label="原进制"> <option value="2">二进制</option> <option value="8">八进制</option> <option value="10" selected="selected">十进制</option> <option value="16">十六进制</option> </optgroup> </select> </div> <div class="col-xs-5 col-md-6"> <input type="text" class="form-control" name="value" placeholder="Number"> </div> <div class="col-xs-3 col-md-3"> <input type="submit" class="btn btn-primary btn-block" value="转换"> </div> </div> </form>
<div class="row"> <div class="col-md-6"> <table class="table table-bordered table-condensed" id="hex-show"> <thead> <tr> <th>进制</th> <th>值</th> </tr> </thead> <tbody> <tr> <td>二进制</td> <td class="bin-show"></td> </tr> <tr> <td>八进制</td> <td class="oct-show"></td> </tr> <tr> <td>十进制</td> <td class="dec-show"></td> </tr> <tr> <td>十六进制</td> <td class="hex-show"></td> </tr> </tbody> </table> </div> </div> <h1>颜色转换</h1> <form id="color-con"> <div class="row"> <div class="col-xs-3 col-md-3"> <input type="text" class="red-color form-control" placeholder="Red" name="red" maxlength="3"> </div> <div class="col-xs-3 col-md-3"> <input type="text" class="green-color form-control" placeholder="Green" name="green" maxlength="3"> </div> <div class="col-xs-3 col-md-3"> <input type="text" class="blue-color form-control" placeholder="Blue" name="blue" maxlength="3"> </div> <div class="col-xs-3 col-md-3"> <input type="button" id="rgb-color-con" class="btn btn-primary btn-block" value="转换"> </div> </div>
<div class="row"> <div class="col-xs-9 col-md-9"> <input type="text" class="hex-color form-control" placeholder="十六进制颜色" name="red" maxlength="6"> </div> <div class="col-xs-3 col-md-3"> <input type="button" id="hex-color-con" class="btn btn-primary btn-block" value="转换"> </div> </div>
<div class="color-show-rgb row"> <div class="col-xs-4 red-show">Red</div> <div class="col-xs-4 green-show">Green</div> <div class="col-xs-4 blue-show">Blue</div> </div>
<div class="color-show-rgb row"> <div class="col-xs-12 color-show">Color</div> </div> </form> <button type="button" class="btn btn-primary hidden" data-toggle="modal" data-target=".bs-example-modal" id="alert-toggle"></button> <div class="modal fade bs-example-modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">提示</h4> </div> <div class="modal-body"> <p id="alert">…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button> </div> </div> </div> </div> </div>

<script src="http://luoluolzb.cn/static/libs/jquery/jquery-1.12.4.min.js"></script>
<script src="http://luoluolzb.cn/static/product/hexcon/hexcon.js"></script>