JavaScript的toast
JavaScript的toast
- JavaScript的toast
JavaScript的toast
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js的toast</title>
</head>
<!-- toast的css -->
<style type="text/css">@keyframes show {0% {opacity: 0;}100% {opacity: 1;}}@keyframes hide {0% {opacity: 1;}100% {opacity: 0;}}.toast_box {position: fixed;top: 0;right: 0;bottom: 0;left: 0;/*background-color: rgba(0,0,0,0.5);*/overflow: hidden;display: none;}.toast_box p {position: absolute;bottom: 50%;left: 50%;z-index: 10;transform: translate(-50%, -50%);box-sizing: border-box;padding: 10px 20px;width: 150px;/* 提示框的背景色 */background: #707070;color: #fff;font-size: 16px;text-align: center;border-radius: 6px;opacity: 0.8;}
</style>
<body><button class="btn">click me</button><!-- 提示 --><div class="toast_box"><p id="toast"></p></div>
</body>
<!--JQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">// toast 形参分别是: 提示内容,停留时间function toast(text, time) {let toast = document.getElementById('toast');let toast_box = document.getElementsByClassName('toast_box')[0];toast.innerHTML = text;toast_box.style.animation = 'show 1.5s'toast_box.style.display = 'inline-block';setTimeout(function(){toast_box.style.animation = 'hide 1.5s'setTimeout(function(){toast_box.style.display = 'none';}, 1400)}, time)}$('.btn').click(function () {toast("hello", 1000)})
</script>
</html>结果
JavaScript的toast相关推荐
- Javascript和android原生互调
最近在做原生和js端的互调的功能,自己改了个demo,给大家讲解下. 先上js代码 <!DOCTYPE html> <html> <head><meta ch ...
- 制作npm插件vue-toast-m实例练习
制作npm插件vue-toast-m实例练习(消息弹窗) 一.使用npm插件 import VueToast from 'vue-toast-demo-cc'Vue.use(VueToast)this ...
- android点赞webview页面,Android WebView
一.简介 WebView是Android系统中的原生控件,其主要功能与前端页面进行响应交互,快捷省时地实现如期的功能,相当于增强版的内置浏览器. 使用时需要在配置文件里设置网络权限,定义布局大小和样式 ...
- java加载js_Java加载js
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML) ...
- php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...
- 解决WebView实现获得js中Function返回值
整理自:http://blog.sina.com.cn/s/blog_67ac56e70101ajlp.html 本文实现的是使用WebView调用js代码,并获得function的return值 1 ...
- Bootstrap系列之轻量弹框（Toasts）
文章の目录 1.概述 2.示例 2.1.Basic 2.2.Live 2.3.Translucent 2.4.Stacking 3.Placement 4.Accessibility 5.JavaSc ...
- Android WebView使用与JavaScript使用
WebView基本使用 WebView是View的一个子类,可以让你在activity中显示网页. 可以在布局文件中写入WebView:比如下面这个写了一个填满整个屏幕的WebView: <?x ...
- Android之利用JSBridge库实现Html，JavaScript与Android的所有交互
java 和 js互通框架 WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java和js的互相调用的桥梁. 替代了WebView的自带 ...
- Android WebView 和 javaScript的互相调用(三)
原文出处:http://motalks.cn/2016/08/27/Android-WebView-JavaScript-2/ WebView相关阅读 Android WebView 和 javaSc ...
最新文章
- Java学习总结：42(字节流和字符流)
- 未来属于人工智能工程师，但成功转型不容易
- 说说初用 Mock 工具测试碰到的坑
- Java面向对象（20）--接口
- 定位排查工作流的计算结果数据量不符合预期的方法
- Github | 微软-计算机视觉最佳实践、代码示例和相关文档
- 手机上图片信息怎么拉一个矩形框_华为手机EMUI系统隐藏的10个功能，上手体验后，实用性无敌了...
- 使用matlab解决收益和风险问题 数学建模算法与应用
- 四位共阳数码管与共阴数码管的c语言,4位共阳LED数码管与常用共阳极数码管型号...
- scrapy手工识别验证码登录超星泛雅
- java 微信文章评论点赞_使用fiddler抓取微信公众号文章的阅读数、点赞数、评论数...
- Mini-USB、Micro-USB(Micro-B)、Type-C等接口
- [安全分享]斗鱼360补天沙龙分享-跨域资源那些事
- 七天毁灭地球的十种方法
- Flink集群部署OnYarn模式
- 数字化时代，基于令牌的身份验证是如何工作？
- 三级无刷交流发电机matlab模型,三级无刷交流发电机调压系统的建模及其仿真分析...
- 嵌入式Linux应用开发 1.系统编程 文件IO：open close write read lseek 通过文件io实现cp命令
- Messager for grace
- Linux常用命令整理（适合初学）