<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="text-center">假圖產生器</h2> <div class="col-md-8 col-md-offset-2"> <div class="col-md-6"> <form onsubmit="return false;"> <div class="form-group"> <lable>文字大小</lable> <input id="txtsize" class="form-control" value="18" type="number"> </div> <div class="form-group"> <lable>假圖文字</lable> <input id="txt" class="form-control" value="測試文字123"> </div> <div class="form-group"> <lable>假圖寬度</lable> <input id="w" class="form-control" value="400" type="number"> </div> <div class="form-group"> <lable>假圖高度</lable> <input id="h" class="form-control" value="300" type="number"> </div> <div class="form-group"> <button class="btn btn-default">產生</button> </div> </form> </div> <div class="col-md-6"> <img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=測試文字123&w=400&h=300" class="img-responsive" id="img_text"> </div> </div> </div> </div>

$(document).ready(function(){ $(".btn").click(function(){ var url = 'https://placeholdit.imgix.net/~text'; var txtsize = $('#txtsize').val(); var txt = $('#txt').val(); var w = $('#w').val(); var h = $('#h').val(); var link = url + '?' + 'txtsize=' + txtsize + '&txt=' + txt + '&w=' + w + '&h=' + h; $('#img_text').attr('src',link); }); });