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


Posted in Javascript onJanuary 18, 2016

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

效果图:

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

实现的代码:
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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
vue如何截取字符串
May 06 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 #Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 #Javascript
深入学习jQuery Validate表单验证
Jan 18 #Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 #Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 #Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
You might like
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
浅析Python中的多条件排序实现
2016/06/07 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Django实现文件上传下载
2019/10/06 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
python切割图片的示例
2020/11/12 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
Java基础知识面试题
2014/03/25 面试题
高三自我鉴定怎么写
2013/10/19 职场文书
交通安全教育制度
2014/02/02 职场文书
保护环境演讲稿
2014/05/10 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
初中团委工作总结
2015/08/13 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android