今天要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. 初始redis数据库

    redis就是一个类似于存储在内存中的大字典 安装: windows下安装redis: 你需要在你的环境下安装: pip install redis 以上是在你的全局环境安装, 你如果用的是虚拟环境你 ...

  2. 【译】7. Java反射——私有字段和私有方法

    原文地址:http://tutorials.jenkov.com/java-reflection/private-fields-and-methods.html =================== ...

  3. struts2 防止表单的重复提交

    防止表单重复提交(拦截器) 1.回顾之前的解决办法: 2.Struts2中的解决办法: 2.1.使用重定向 <result type="redirect">/succe ...

  4. Luogu P4306 [JSOI2010]连通数 传递闭包

    正解其实是\(Tarjan\) + \(拓扑拓扑\),但是却可以被\(O(N^3 / 32)\)复杂度的传递闭包水过去.心疼一下写拓扑的小可爱们. 学到一个\(bitset\)优化布尔图的骚操作,直接 ...

  5. 解决mysql乱码问题

    在mysql根目录下创建my.ini文件 my.ini内容为: [mysqld] # 设置默认字符集,只会影响新建数据库的默认字符集 character-set-server=utf8

  6. mysql主从模式下在主库上的某些操作不记录日志的方法

    mysql主从模式下在主库上的某些操作不记录日志的方法 需求场景: 在主库上的需要删除某个用户,而这个用户在从库上不存在(我在接手一个业务的时候,就遇到主从架构用户授权不一致的情况,主库比较全,而从库 ...

  7. SpringMVC简单项目配置

    一.首先,SpringMVC框架使用分层开发,分层是为了实现“高内聚,低耦合”.采用“分而治之”的思想,把问题划分开来各个解决,易于控制,延展和分配资源,最重要的是有利于后期项目维护.MVC是指Mod ...

  8. Xenserver之设置Xenserver和VM机开机自动启动

    一.设置Xenserver开机自动启动 [root@xenserver-DS-TestServer09 ~]# xe pool-list uuid ( RO) : b1c803a6-88cf-7b24 ...

  9. java类的编译、加载和执行

    一.java类的编译流程 这里主要讲的是从java文件到class文件 下图是java类编译的详细步骤: 1.词法分析:将java源代码的字符流转变为标记(Token)的集合,Token是编译过程中的 ...

  10. C#中 Reference Equals, == , Equals的区别

    原文地址:http://blog.csdn.net/wuchen_net/archive/2010/03/23/5409327.aspx ReferenceEquals, == , Equals Eq ...