在android中,可以使用toast搞出一个信息提示的效果,在CSS 3中,其实也可以
模仿一下,如下代码,先是CSS:
#toast{
position: fixed;
top: 20px;
left: 50%;
width: 200px;
margin-left: -100px;
border: 1px solid #666;
background-color: #B1BCCF;
padding: 10px 0 ;
text-align:center;
opacity: .9;
/*The good stuff */
-webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
-moz-transition: opacity 0.5s ease-out; /* FF4+ */
-ms-transition: opacity 0.5s ease-out; /* IE10? */
-o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
transition: opacity 0.5s ease-out;
}
之后设计一个按钮,然后设计JAVASCRIPT代码如下:
<script type="text/javascript">
var intervalCounter = 0;
function hideToast(){
var alert = document.getElementById("toast");
alert.style.opacity = 0;
clearInterval(intervalCounter);
}
function drawToast(message){
var alert = document.getElementById("toast");
if (alert == null){
var toastHTML = '<div id="toast">' + message + '</div>';
document.body.insertAdjacentHTML('beforeEnd', toastHTML);
}
else{
alert.style.opacity = .9;
}
intervalCounter = setInterval("hideToast()", 1000);
}
function save(){
drawToast("Item saved");
}
</script>
<button onclick="save()">Save</button>
可惜只能在非IE下运行了
分享到:
相关推荐
主要为大家详细介绍了android自定义Toast设定显示时间,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
实现了一个类似android中toast效果
android 带颜色的Toast效果+Toast位置设置
全局Toast工具类,作用:连续显示toast提示时取消上一个toast 通过ToastUtil.toast(Context(), "文本")调用
使用Qt Widget Application技术实现桌面操作系统下类似Android的toast控件效果。Demo中实现为多线程的单例模式。
android中Toast和Notification的应用.
Demo android service toast 第一个版本
Android Toast 自定义背景、图片 随心使用
pc模拟Android端toast效果,自定义两种形式 详细参照此贴:https://blog.csdn.net/qq_37603131/article/details/124287143?spm=1001.2014.3001.5501
最近在开发中我们经常会在适配5.0以后的机型遇到各种各样的问题,其中有一个不大不小的问题就是:Toast不显示问题,这篇文章就给大家总结了Android 5.0以上Toast不显示的原因与解决方法,有需要的朋友们可以参考借鉴...
Android中自定义Toast背景颜色及字体颜色,防止Toast多次创建的ToastUtil,详细了解请移步:http://blog.csdn.net/zxc514257857/article/details/68962539
一个简单的自定义Toast资源,您可以根据自己的需要更改我的代码即可实现您想要的效果(主要是更改xml文件的布局),这是androidstudio的项目,但是不妨碍在eclipse中使用,可以直接在eclipse中新建android项目,然后将...
iOS中实现android中Toast的效果,封装的代码库,使用简单
移动H5领域。js、css3仿ios toast提示。
Toast 实现了类似 Android Toast 风格的弹出提示信息框,支持图片。
android 解决Toast重复显示问题!
Android:实现Toast自定义样式(包括:自定义位置、带图片等)、自定义显示时长(包括可用系统时长、可自定义)
Android 源码演示5种toast显示效果,一共是以下几种演示:默认的Toast显示、自定义位置的Toast显示、带图片的Toast显示、完全自定义的Toast显示、长时间的Toast显示,Android 自定义5种toast显示效果。有的Toast效果...
PhoneGap android的Toast插件,使用方法不用介绍了,用phoneGap开发android应用的人都知道,希望对大家有帮助。