简单的toast实现

墨蓝 2024-04-19 14:56 67阅读 0赞

toast

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>toast</title>
        <style> #toast { position: fixed; top:45%; top:45vh; left: 0; height: 0; width:100%; text-align: center; box-sizing: border-box; display: none; } #toast span { margin:0; padding:10px 20px; background: rgba(0,0,0,.7); font-size: 14px; line-height: 1.5; display: inline-block; max-width: 80%; color:#fff; box-sizing: border-box; transform: translate(0,-50%); } </style>    
    </head>
    <body>
        <h1>这里是toast， 点击我查看</h1>
        <div id="toast">
            <span>toast</span>
        </div>
        <script> "use strict"; // toast 提示 function Toast(msg, el, t) { var ele = document.querySelector(el); var Ospan = ele.querySelector('span') // console.log(ele,Ospan) if (typeof msg === 'string') { Ospan.innerHTML=msg; ele.style.display = 'block'; setTimeout(()=>{ ele.style.display = 'none'; }, t ? t : 2000); } else { console.warn("param msg must be a String !"); } } document.querySelector('body').onclick = function(){ Toast("toast 提示内容","#toast") } </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读

相关简单的toast实现

oast <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

墨蓝/ 2024年04月19日 14:56/ 0 赞/ 68 阅读

相关 Android基础#7: Toast工具类的实现，以及设置Toast文字居中显示

内容简介： Android App开发过程中，Toast默认的显示方式是在屏幕的底部，但是，有时候，感觉文字显示在屏幕中间比较美观。本篇实现的功能是：让Toast文字可以

今天药忘吃喽~/ 2023年10月16日 21:57/ 0 赞/ 21 阅读

相关 Android Toast

![Center][] ![Center 1][] ![Center 2][] ![Center 3][] pac

小咪咪/ 2022年09月28日 05:48/ 0 赞/ 226 阅读

相关 toast的用法

[Android应用开发学习—Toast使用方法大全][Android_Toast] 博客分类： [Android应用开发学习][Android] [Toa

小鱼儿/ 2022年08月06日 10:09/ 0 赞/ 178 阅读

相关网页中android Toast效果的实现

将以下代码拷贝到html文件中即可[测试][Link 1] 【转载请注明出处：[http://blog.csdn.net/zjbpku/article/details/774

左手的ㄟ右手/ 2022年06月18日 10:44/ 0 赞/ 227 阅读

相关 Toast加强版Toasty简单使用

GitHub地址: [https://github.com/GrenderG/Toasty][https_github.com_GrenderG_Toasty] 1

雨点打透心脏的1/2处/ 2022年06月06日 12:19/ 0 赞/ 216 阅读

相关 Qt实现移动端Toast提示消息

先上具体的实现效果图： ![在这里插入图片描述][20190531124228383.gif] 弹出提示后，提示框在一定时间内消失。 ----------------

深碍√TFBOYSˉ_/ 2022年04月25日 10:12/ 0 赞/ 440 阅读

相关 Android之Toast简单实现不循环提示

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 不知道各位程序猿们在项目中有没有遇到这个问题：点击一个view弹出一个Toast，我们

向右看齐/ 2022年01月15日 08:55/ 0 赞/ 375 阅读

相关 react-native Toast简单封装

import { Component} from 'react'; import Toast from 'react-native-tiny-toast';

野性酷女/ 2021年08月14日 00:14/ 0 赞/ 533 阅读

相关 vue 通用的toast弹窗 toast 弹窗提示

![20190829171055833.gif][] <!DOCTYPE html> <html lang="en"> <head>

水深无声/ 2021年07月25日 00:45/ 0 赞/ 677 阅读