徒手撸一个简单的toast组件

curlyCheng 发布于2019-08-02 15:39 / 776人阅读

摘要：最近写了个简单的的页面，里面需要一个提交表单的反馈动作，于是手撸了个简单的组件这是个

最近写了个简单的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

云服务器海外云主机简单编写一个html 您编一个简单点的免费撸域名撸云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54270.html

徒手撸一个简单的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

摘要：是一个组件库目前拥有的组件语法编写，无依赖原生模块化，以上支持，请开启静态服务器预览效果，静态服务器传送门采用变量配置样式辛苦造轮子，欢迎来仓库四月份找工作，求内推，坐标深圳写在前面去年年底项目中尝试着写过一个分页的组件，然后就有了写的想法 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

zilu 2019-08-22 15:39 评论0 收藏0
徒手撸UI之Paginator

摘要：是一个组件库目前拥有的组件语法编写，无依赖原生模块化，以上支持，请开启静态服务器预览效果，静态服务器传送门采用变量配置样式辛苦造轮子，欢迎来仓库四月份找工作，求内推，坐标深圳写在前面去年年底项目中尝试着写过一个分页的组件，然后就有了写的想法 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

liuhh 2019-08-22 15:43 评论0 收藏0
徒手撸UI之TimePicker

摘要：是一个组件库目前拥有的组件语法编写，无依赖原生模块化，以上支持，请开启静态服务器预览效果，静态服务器传送门采用变量配置样式辛苦造轮子，欢迎来仓库四月份找工作，求内推，坐标深圳写在前面去年年底项目中尝试着写过一个分页的组件，然后就有了写的想法 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

Codeing_ls 2019-08-22 15:41 评论0 收藏0
徒手撸UI之Cascader

摘要：但是如果一刹那我不想选江疏影了，我想选张雨绮因为胸大，首先我要从霍思燕换到高圆圆，然后转到张雨绮，选中展示出来，这时候就要先删除霍思燕，然后把高圆圆和张雨绮进来。 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, I...

junnplus 2019-08-22 17:35 评论0 收藏0