徒手擼一個簡單的toast組件

curlyCheng 發(fā)布于2019-08-02 15:39 / 889人閱讀

摘要：最近寫了個簡單的的頁面，里面需要一個提交表單的反饋動作，于是手擼了個簡單的組件這是個

最近寫了個簡單的html+js的頁面，里面需要一個提交表單的反饋動作，于是手擼了個簡單的toast組件

toast.js

function showToast(msg, duration) {
  duration = isNaN(duration) ? 2000 : duration;
  var m = document.createElement("div");
  m.innerHTML = msg;
  m.style.cssText = "width:50%; min-width:180px; background:#000; opacity:0.6; height:auto;min-height: 30px; color:#fff; line-height:30px; text-align:center; border-radius:4px; position:fixed; top:60%; left:20%; z-index:999999;";
  document.body.appendChild(m);
  setTimeout(function () {
    var d = 0.5;
    m.style.webkitTransition = "opacity " + d + "s ease-in";
    m.style.opacity = "0";
    setTimeout(function () { document.body.removeChild(m) }, d * 1000);
  }, duration);
}

index.html




  
  
  toast

云服務(wù)器 GPU云服務(wù)器簡單編寫一個html 您編一個簡單點的免費擼域名擼云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54270.html

相關(guān)文章

徒手擼一個簡單的toast組件

摘要：最近寫了個簡單的的頁面，里面需要一個提交表單的反饋動作，于是手擼了個簡單的組件這是個最近寫了個簡單的html+js的頁面，里面需要一個提交表單的反饋動作，于是手擼了個簡單的toast組件 toast.js function showToast(msg, duration) { duration = isNaN(duration) ? 2000 : duration; var ...

scola666 2019-08-26 10:26 評論0 收藏0
徒手擼UI之DatePicker

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內(nèi)推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

zilu 2019-08-22 15:39 評論0 收藏0
徒手擼UI之Paginator

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內(nèi)推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

liuhh 2019-08-22 15:43 評論0 收藏0
徒手擼UI之TimePicker

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內(nèi)推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

Codeing_ls 2019-08-22 15:41 評論0 收藏0
徒手擼UI之Cascader

摘要：但是如果一剎那我不想選江疏影了，我想選張雨綺因為胸大，首先我要從霍思燕換到高圓圓，然后轉(zhuǎn)到張雨綺，選中展示出來，這時候就要先刪除霍思燕，然后把高圓圓和張雨綺進來。 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, I...

junnplus 2019-08-22 17:35 評論0 收藏0