01js引入方式 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .btn1{
 9             width:150px;
10             height: 40px;
11             font-size: 24px;
12             font-family: '隶书';
13             background-color: rgb(233, 233, 162);
14             color: rgb(234, 138, 138);
15             border: 3px solid rgb(74, 194, 228);
16             border-radius: 5px;
17         }
18     </style>
19     
20     <!--
21         js引入方式
22             1 内嵌式 在head中通过一对script标签定义脚本代码
23             2 引入外部脚本文件 在head中通过一对script标签定义脚本代码
24 
25         注意：
26             1 一个html中可以有多个script标签，可以定义多对
27             2 一对script标签不能在引入外部js文件的同时，定义内部脚本
28             3 一对script标签中间，如果用于引入外部js文件，中间最好不要有任何字符，包括换行
29 
30     -->
31     <!--
32     <script>
33         /*
34             1 js 声明函数  function 函数名(){}
35             2 函数和单击按钮的行为绑定到一起  onclick="suprise()"单击绑定  （ondbclick是双击绑定）
36             3 弹窗提示
37         */
38         function suprise(){
39             //弹窗提示
40             alert("Hello,我是惊喜！")
41         }
42     </script>
43     -->
44 
45     <SCRipt src="jsfile/button.js" type="text/javascript"></SCRipt>
46     
47 </head>
48 <body>
49     <button class="btn1" onclick="suprise()">点我有惊喜</button>
50 </body>
51 </html>

jsfile/button.js

1 function suprise(){
2     //弹窗提示
3     alert("Hello,我是惊喜！")
4 }

 

posted @ 2024-03-11 20:44  白茶花约  阅读(9)  评论(0)    收藏  举报