码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript入门(一)弹出方框

时间:2018-03-24 20:36:09      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:asc   png   入门   ack   分享图片   rip   bsp   span   height   

     今天要javascript做一个用网页弹出框框的效果,虽然没什么卵用。

      效果如图,弹出一个“hello world”的框框。

           技术分享图片

           1. 新建一个html 页面, 如图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

        2. 接下有用三种方式弹出框框:

         方式一:(不推荐)行间事件,直接在<body>里写入弹出信息。弹出方式, 打开页面,点击button,弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" name="" onclick="alert(‘ok‘!);">
</body>
</html>

     

         方式二:页面script标签嵌入。弹出方式,打开页面直接弹出;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
         var message = "Hello"
        alert(message);
   </script>
</head>
<body>
   
</body>
</html>

 

         方式三:外部引入。弹出方式,打开页面直接弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/test1.js"></script>
</head>
<body>
   
</body>
</html>

               然后在js目录下新建一个文件 test1.js

alert(‘hello world‘);

  

 

Javascript入门(一)弹出方框

标签:asc   png   入门   ack   分享图片   rip   bsp   span   height   

原文地址:https://www.cnblogs.com/Jomini/p/8641100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!