今天要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. Java String与Stringbuffer

    String 与其它类型的转换,e.g. BigInteger Stringbuffer 诸多函数,replace…… String 不能修改,Stringbuffer 可以修改, 应避免以下的操作: ...

  2. Day3--Python--字符串,for循环,迭代

    常见的基本数据类型: 1.int 整数 主要用来进行数学运算 2.bool 布尔. 判断真假. if 和 while循环中常用 3.str 字符串,一般放小量数据 4.list 列表.可以存放大量的数 ...

  3. Luogu P2617 Dynamic Rankings

    带修主席树的模板,因为状态不好所以敲了很长时间,不过写完感觉能更好地理解主席树了. 核心其实就是树状数组套主席树,维护方法不再是以前的那种一步一修改,而是对于树状数组上的每一个点建立一棵权值线段树,然 ...

  4. linux proc

    /proc文件系统下的多种文件提供的系统信息不是针对某个特定进程的,而是能够在整个系统范围的上下文中使用.可以使用的文件随系统配置的变化而变化. /proc/cmdline 这个文件给出了内核启动的命 ...

  5. OracleDBconsoleorcl服务无法启动的原因及解决思路

    被这个OracleDBconsole服务无法启动的问题折磨了两个星期了,今天很幸运,在网上无意间看到了一位大侠的思路,虽然错误的情况并不完全相同,但他的思路完全可以搬过来用.环境:Windows XP ...

  6. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

  7. netty的对象传输

    pom <!-- https://mvnrepository.com/artifact/io.netty/netty-all --> <dependency> <grou ...

  8. 15. 迭代器模式（Iterator Pattern）

    动机(Motivate):     在软件构建过程中,集合对象内部结构常常变化各异.但对于这些集合对象,我们希望在不暴露其内部结构的同时,可以让外部客户代码透明地访问其中包含的元素;同时这种“透明遍历 ...

  9. linux备份用户权限

    1:切换root用户,进入home目录,执行以下命令: [root@localhost home]# ll /home/wangfajun 2: home目录下执行以下命令进行wangfajun用户的 ...

  10. Python assert作用

    使用assert断言是学习python一个非常好的习惯,python assert 断言句语格式及用法很简单.在没完善一个程序之前, 我们不知道程序在哪里会出错.与其让它在运行最后崩溃,不如在出现错误 ...