html消息提示图标,js炫酷消息通知插件

这是一款js炫酷消息通知插件。该js消息通知插件自带4种情景模式,可以配置消息通知的标题、内容、图标和操作按钮等。

使用方法

在页面中引入naranja.min.js和naranja.min.css文件。

初始化插件

使用下面的方法来构造一个消息通知对象。

naranja().log({

title: 'Notification Title', //

text: 'Here goes a description for notifiaction', //

icon: true or false, //

timeout: 2000 or 'keep', //

buttons: [

{

text: 'OK',

click: function (e) {

// click event close notifiaction

// unless you use preventClose method

e.preventClose()

// if you want close notifiaction

// manually, use closeNotification

e.closeNotification()

}

},

{

text: 'Cancel',

click: function () {

// make something here...

// you can (but you should not)

// add infinity buttons

}

}

]

})

可以使用的情景模式还有:

naranja().log({ ...

naranja().success({ ...

naranja().warn({ ...

naranja().error({ ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个炫酷的网站维护提示HTML页面的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站维护中</title> <style> body { background-color: #333; color: #fff; font-family: Arial, sans-serif; text-align: center; padding-top: 50px; } h1 { font-size: 60px; margin-bottom: 50px; } p { font-size: 24px; margin-bottom: 30px; } .countdown { font-size: 36px; margin-bottom: 30px; } .social-icons { margin-top: 50px; } .social-icon { display: inline-block; margin-right: 20px; font-size: 36px; color: #fff; text-decoration: none; transition: color 0.3s ease-in-out; } .social-icon:hover { color: #00bfff; } </style> </head> <body> <h1>网站维护中</h1> <p>非常抱歉,我们正在进行网站维护,预计需要一些时间。</p> <div class="countdown">00:00:00</div> <p>请稍后再回来,感谢您的耐心等待!</p> <div class="social-icons"> <a href="#" class="social-icon"><i class="fab fa-facebook-square"></i></a> <a href="#" class="social-icon"><i class="fab fa-twitter-square"></i></a> <a href="#" class="social-icon"><i class="fab fa-instagram-square"></i></a> </div> <script> // 倒计时 var countdown = document.querySelector('.countdown'); var timer = setInterval(function() { var hours = Math.floor(Math.random() * 24); var minutes = Math.floor(Math.random() * 60); var seconds = Math.floor(Math.random() * 60); countdown.innerHTML = hours + ':' + minutes + ':' + seconds; }, 1000); </script> </body> </html> ``` 这个页面使用了黑色背景、白色文字和淡蓝色的社交媒体图标,整体风格简洁、大气。在页面上添加了一个倒计时计时器,随机显示小时、分钟和秒数,增加了一些趣味性和互动性。 该页面还使用了FontAwesome图标库,添加了社交媒体图标链接,方便访问者在维护期间与网站保持联系。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值