将按钮活动脚本更改为onLoad效果
将按钮活动脚本更改为onLoad效果
提问于 2015-02-25 19:48:27
我有一个简单的代码，可以显示一个通知框在左上角的网页时，点击特定的按钮。
我需要的代码可以显示在通知框的时刻，网页是完全准备就绪的&加载，在同一地点，同一个计时器。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-growl.css" />
<script src="js/modernizr.custom.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="color-9">
<div class="container">
<!-- Top Navigation -->
<div class="main clearfix">
<div class="column">
<button id="notification-trigger" class="progress-button">
<span class="content">Show Notification</span>
<span class="progress"></span>
</button>
</div>
</div>
<!-- Related demos --></div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
(function() {
var bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
bttn.addEventListener( 'click', function() {
// simulate loading (for demo purposes only)
classie.add( bttn, 'active' );
setTimeout( function() {
classie.remove( bttn, 'active' );
// create the notification
var notification = new NotificationFx({
message : '<p>Hello there! I\'m a classic notification but I have some elastic jelliness thanks to <a href="http://bouncejs.com/">bounce.js</a>. </p>',
layout : 'growl',
effect : 'jelly',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
} );
})();
</script>如果有人能帮我修改代码的话，谢谢就提前了很多。:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-25 20:41:28
谢谢帮忙。
我已经编辑并找到了一种方法，在这里编辑的最后一个块：
(function() {
var bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
addEventListener('load',function() {
// create the notification
var notification = new NotificationFx({
message : '<p>Hello there! I\'m a classic notification but I have some elastic jelliness thanks to <a href="http://bouncejs.com/">bounce.js</a>. </p>',
layout : 'growl',
effect : 'jelly',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
})();谢谢你的帮助:)现在工作得很好。
Stack Overflow用户
发布于 2015-02-25 20:06:13
只需分别声明click处理程序函数，然后可以在绑定它之后调用它，而不触发单击事件，bttn.click()会这样做。
// Declare handler:
var clickHandler = function (event) {
// Your onclick function
};
bttn.addEventListener( 'click', clickHandler); // Bind handler
clickHandler(); // Fire it immediately页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28728268
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号