纯JavaScript基于notie.js插件实现消息提示特效

 更新时间:2016年01月18日 16:50:32   作者:爱上程序猿  
这篇文章主要介绍了纯JavaScript基于notie.js插件实现消息提示特效,可以制作Alert提示框,确认框和带输入的消息框,感兴趣的小伙伴们可以参考一下

本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下

效果图:

实现的代码:
html代码:

<br><br><br><br><br><br>
  <article class="zzsc">
    <div class="div-ext">
      <div class="div-int">
 
        <span>Test notie with these buttons:</span>
        <br>
        <button onclick="success();">Success</button>
        <button onclick="warning();">Warning</button>
        <button onclick="error();">Error</button><br>
        <button onclick="info();">Information</button>
        <button onclick="confirm();">Confirm</button>
        <button onclick="input();">Input</button>
        <br>
 
 
      </div>
    </div>
  </article>

js代码:

function success() {
      notie.alert(1, 'Success!', 2);
    }
 
    function warning() {
      notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
    }
 
    function error() {
      notie.alert(3, 'Error.', 2);
    }
 
    function info() {
      notie.alert(4, 'Information.', 2);
    }
 
    function confirm() {
      notie.confirm('Are you sure you want to do that?<br><b>That\'s a bold move...</b>', 'Yes', 'Cancel', function () {
        notie.alert(1, 'Good choice!', 2);
      });
    }
 
    function input() {
      notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function (value_entered) {
        notie.alert(1, 'You entered: ' + value_entered, 2);
      });
    }

希望本文所述对大家学习javascript程序设计有所帮助。

相关文章

  • TypeScript遍历Array的方法(for,forEach,every)

    TypeScript遍历Array的方法(for,forEach,every)

    本文主要介绍了TypeScript遍历Array的方法(for,forEach,every),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • JS对字符串编码的几种方式使用指南

    JS对字符串编码的几种方式使用指南

    在客户端中,要对字符串编码,可以采用:escape();encodeurl();encodeURIComponent();下面我们就来具体讲解下这几个方法。
    2015-05-05
  • JavaScript 自定义弹出窗口的实现代码

    JavaScript 自定义弹出窗口的实现代码

    这篇文章主要介绍了JavaScript 自定义弹出窗口的实现代码,实现一采用html编写弹出窗口内容,实现二采用JavaScript编写弹出窗口内容,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-09-09
  • JavaScript中清空数组的方法总结

    JavaScript中清空数组的方法总结

    本文给大家总结了三种js清空数组的方法,每种方法都与众不同,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-12-12
  • javascript 跨浏览器的事件系统

    javascript 跨浏览器的事件系统

    从技术上讲,javascript并没有提供内置的系统来实现这个非常重要的事件驱动编程,不过得益于浏览器的DOM 事件模型,这缺点并没有过多地暴露出来。
    2010-03-03
  • Webpack的Loader和Plugin的区别

    Webpack的Loader和Plugin的区别

    这篇文章主要介绍了Webpack的Loader和Plugin的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • NodeJS Express框架中处理404页面一个方式

    NodeJS Express框架中处理404页面一个方式

    这篇文章主要介绍了NodeJS Express框架中处理404页面一个方式,原理就是把404路由放在最后匹配,也就是路由中没有定义的全部转到404页面,需要的朋友可以参考下
    2014-05-05
  • JS实现页面超时后自动跳转到登陆页面

    JS实现页面超时后自动跳转到登陆页面

    这篇文章主要介绍了JS实现页面超时后自动跳转到登陆页面,需要的朋友可以参考下
    2015-01-01
  • JavaScript markdown 编辑器实现双屏同步滚动

    JavaScript markdown 编辑器实现双屏同步滚动

    这篇文章主要介绍了JavaScript markdown 编辑器实现双屏同步滚动,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • electron的webview和内嵌网页通信的方法

    electron的webview和内嵌网页通信的方法

    在 Electron 的世界里,webview 标签相当于一个小盒子,里面可以装一个完整的网页,就像一个迷你浏览器,这篇文章主要介绍了electron的webview和内嵌网页如何通信,需要的朋友可以参考下
    2024-04-04

最新评论