纯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程序设计有所帮助。

相关文章

  • 浅谈javascript的call()、apply()、bind()的用法

    浅谈javascript的call()、apply()、bind()的用法

    这篇文章主要为大家详细介绍了javascript的call()、apply()、bind()的用法,探讨JavaScript中函数的一些特殊用法,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • vue双向绑定简要分析

    vue双向绑定简要分析

    这篇文章主要介绍了vue双向绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript算法面试题

    JavaScript算法面试题

    这篇文章主要给大家分享的是JavaScript算法面试题汇总,文章举例清晰内容详细,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • js控制输入框获得和失去焦点时状态显示的方法

    js控制输入框获得和失去焦点时状态显示的方法

    这篇文章主要介绍了js控制输入框获得和失去焦点时状态显示的方法,可实现判断输入框的焦点状态设置不同样式的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 基于Ionic3实现选项卡切换并重新加载echarts

    基于Ionic3实现选项卡切换并重新加载echarts

    这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 运用js教你轻松制作html音乐播放器

    运用js教你轻松制作html音乐播放器

    这篇文章主要为大家详细介绍了如何运用js教你轻松制作html音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 如何使用Bootstrap创建表单

    如何使用Bootstrap创建表单

    在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单
    2017-03-03
  • JS实现的简单下拉框联动功能示例

    JS实现的简单下拉框联动功能示例

    这篇文章主要介绍了JS实现的简单下拉框联动功能,涉及javascript事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • JS实现贪吃蛇游戏

    JS实现贪吃蛇游戏

    这篇文章主要介为大家详细绍了JS实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript利用canvas绘制流星雨效果

    JavaScript利用canvas绘制流星雨效果

    这篇文章主要为大家详细介绍了如何通过JavaScript+canvas实现绘制流星雨效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-10-10

最新评论