今天要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入门(一)弹出方框的更多相关文章

  1. javaScript 删除事件 弹出确认 取消对话框

    javaScript 删除事件 弹出确认 取消对话框 1. <a href="javascript:if(confirm('确实要删除?'))location='http://www. ...

  2. JavaScript:九种弹出对话框

    [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE="javascript"> <!- ...

  3. Javascript 访问网页弹出qq

    先在网页的正文结束位置 加上引用代码 代码如下 <SCRIPT type="text/javascript" src="/QQ.js"></S ...

  4. JavaScript三在弹出的对话框中

    据悉js小伙伴会发现,我们在某些情况下使用的alert()办法.prompt()办法.prompt()办法.它们在屏幕上的对话框.容,使用这样的方法使得页面的交互性更精彩.实际上我们常常会在进行网页浏 ...

  5. Javascript：猜猜弹出的是啥？为啥？

    背景 经常需要向新入职的年轻同学解释Javascript的两个概念:单线程和作用域链,今天就再写篇博客说明一下. 单线程 队列:只有一个用来存储回调方法的队列. 消费线程:只有一个消费线程,不停的从队 ...

  6. JavaScript三种弹出框（alert，confirm和prompt）用法举例

    http://blog.csdn.net/lucky51222/article/details/45604681 我们在做网页交互的时候往往需要用户在操作之前弹出一个提示消息框来让用户做一些点击才能继 ...

  7. javascript实现掉落弹出层------Day29

    顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...

  8. Selenium入门10 弹出框的处理 switch_to.alert

      三种弹出框alert(一个按钮),confirm(两个确认,取消),prompt(两个按钮+输入框). 切换到弹框: switch_to_alert()  新版的selenium用:  brows ...

  9. 超级链接a中javascript:void(0)弹出另外一个框问题

    转字:http://my.oschina.net/castusz/blog/68186 结果在IE.Firefox.Chrome都是先执行的onclick事件,在项目中我们尽量不要同时使用这两种方式. ...

随机推荐

  1. Day16--Python--初识面向对象

    今日主要内容一. 面向对象思想 1. 面向过程. 重点在'过程'. 按照事物迭代发展流程. 优点: 简单,流水线式的操作 缺点: 可扩展性差.可维护性差. 2. 面向对象. 对象是属性和动作的集合体. ...

  2. Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法

    Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法 在使用struts2的项目中上传文件的时候出现了一个这样的错误: 2011-7 ...

  3. springboot学习之maven多环境打包的几种方式

    在应用部署的时候,往往遇到需要发布到不同环境的情况,而每个环境的数据库信息.密钥信息等可能会存在差异. 1.在默认的application.properties或者yaml中设置profile spr ...

  4. MySQL_参数设置

    1.max_allowed_packet 描述:有时备份数据库时,将本地psc文件备份到数据库时,会遇见备份不成功的情况 分析:这时要考虑,是否由于max_allowed_packet这个参数过小,导 ...

  5. Mark标记功能的实现（像手工标记的一样）

    今天看到一个网站的标记功能,觉得很不错,先记录一下,emm <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. C#设计模式（5）——建造者模式

    1.建造者模式介绍 在软件开发中,有时我们要创建一个复杂的对象,这个对象由几个子部件按一定的步骤组合而成,这时候我们就可以使用建造者模式了.说到建造者我们首先想到的是盖房子,盖房子简单的说有三个步骤: ...

  7. 【leetcode-86】 分隔链表

    (1过) 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = 1-> ...

  8. JavaScript 从入门到放弃（二）模块化工具requirejs

    入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...

  9. java代码实现ftp服务器的文件上传和下载

    java代码实现文件上传到ftp服务器: 1:ftp服务器安装: 2:ftp服务器的配置: 启动成功: 2:客户端:代码实现文件的上传与下载: 1:依赖jar包: 2:sftpTools   工具类: ...

  10. 将WORD2010文件标记为最终状态

    将WORD2010文件标记为最终状态 在与他人共享WORD2010文档的副本之前,可以使用“标记为最终状态”命令将文件设置为只读,防止他人对文件进行更改.在将文件标记为最终状态后,键入.编辑命令以及校 ...