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

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

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

PC蛋蛋预测

引用文件路径一般写在 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要一一对应。

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: