目前分類:JavaScript (5)
- Apr 27 Thu 2017 21:46
JavaScript比較時間時間大小
- Apr 20 Thu 2017 09:36
ajax getdata set kendoGrid
ajax data = data var dataSource = new kendo.data.DataSource({ data: data.data, pageSize: 10, schema: { total: response=> { return response.length } } }) $('#divid').data('kendoGrid').setDataSource(dataSource)
- Dec 28 Wed 2016 22:49
input 選擇圖片即顯示
參考文章之內容
<input accept="image/*" id="uploadImage" type="file"> <img id="img" src=""> <script> $("#uploadImage").change(function(){ readImage( this ); }); function readImage(input) { if ( input.files && input.files[0] ) { var FR= new FileReader(); FR.onload = function(e) { //e.target.result = base64 format picture $('#img').attr( "src", e.target.result ); }; FR.readAsDataURL( input.files[0] ); } } </script>
修改為按下按鈕後才更換
<table> <tr> <td><input type="file" name="file" accept="image/*" id="uploadImage"/></td> <td><button type="submit" class="btn btn-primary" onclick="JavaScript:return Validator();">更換</button></td> <tr/> </table> <script> var upload = document.querySelector('#uploadImage'); if ( upload.files && upload.files[0] ) { alert('test'); var FR= new FileReader(); FR.onload = function(e) { //e.target.result = base64 format picture $('#prove_img').attr( "src", e.target.result ); }; FR.readAsDataURL( upload.files[0] ); } </script>
參考文章:
http://howard10335.blogspot.tw/2015/09/javascripthtml-inputbase64-string.html
- Mar 25 Fri 2016 01:29
checkbox點選狀態javascript執行動作 / checkbox using javascript
<script> $(function(){ $("#div id").hide(); $("#checkbox id").change(function(){ if ($(this).is(':checked')) { $("#div id").show(); } else { $("#div id").hide(); } }); }); </script>
- Mar 17 Thu 2016 23:00
select onChange 選單跳頁 /select onChange changePage
<select onChange="location = this.options[this.selectedIndex].value;"> <option value="#">請選擇</option> <option value="https://www.google.com.tw">Google 台灣</option> <option value="http://tw.yahoo.com">Yahoo! 奇摩</option> <option value="http://www.php.net">PHP.net</option> </select>
這個 select 選單的第一行我們用了『onChange="location = this.options[this.selectedIndex].value;"』這樣的語法,當選單被改變的時候,會執行等號右邊的 JavaScript 程式碼,而 location 用來執行跳頁,『 this.options[this.selectedIndex].value』用來抓取網友所選擇的項目值,可以看到 select 的每個選項(option)都有一個 value,設定每個 value 的值為不同的網址,這樣 JavaScript 就知道要前往哪個網頁囉!(第一個 option 由於僅用來顯示「請選擇」的文字,所以 value 的值只給 # 字號,這樣選擇第一項就不會跳到別的網頁)
JavaScript 的 onChange 事件通常用來根據網友的動作而執行程式碼,除了可以用在 select option 下拉式選單之外,也可以用在其他的表單欄位,例如 text、textarea ... 等,只要是當網友去改變欄位值而需要觸發事件的時候都可以適用
-----------------------------------------------------------------
轉自 Wibibi 網頁設計教學百科