[前端]特效js的正确引用算法范例

2016-08-10 14:03:18 评论 3,508次浏览

js代码是前端工作中十分常见的特效元素，js使静态文件成为一个“智能”的交互页面，这里我们将一以一个插件为例，写一个js文件的引用正确范例；

引用文件路径一般写在 head之间

<script src="css/sweet-alert.js" ></script>

<body oncontextmenu="event.returnValue=true;" onload="TimeClose();">
<header class="refreshbt" style="text-align:center">
<span class="ttp">算法切换：</span>
<input type="button" value="5" class="rbt btl" id='sf5' onclick="chgSel(5);">
<input type="button" value="4" class="rbt btl" id='sf4' onclick="chgSel(4);">
<input type="button" value="3" class="rbt btl" id='sf3' onclick="chgSel(3);">
<input type="button" value="2" class="rbt btl" id='sf2' onclick="chgSel(2);">
<input type="button" value="1" class="rbt" id='sf1' onclick="chgSel(1);">

<script>
document.querySelector('#sf5').onclick = function(){
swal({
title: "算法切换中……",
text: "正在为您切换至“宝龙算法”!!!",
timer: 2000
});
};
document.querySelector('#sf4').onclick = function(){
swal({
title: "算法切换中……",
text: "正在为您切换至“北极熊算法”!!!",
timer: 2000
});
};
document.querySelector('#sf3').onclick = function(){
swal({
title: "算法切换中……",
text: "正在为您切换至“明灯算法”!!!",
timer: 2000
});
};
document.querySelector('#sf2').onclick = function(){
swal({
title: "算法切换中……",
text: "正在为您切换至“元芳算法”!!!",
timer: 2000
});
};document.querySelector('#sf1').onclick = function(){
swal({
title: "算法切换中……",
text: "正在为您切换至“狗蛋经典算法”!!!",
timer: 2000
});
};
</script>

可见 id='sf5' 于js调用中的document.querySelector('#sf5').onclick要一一对应。

转载请注明：[前端]特效js的正确引用算法范例 | 尽享网 +复制链接

发表评论取消回复