今天要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. 2050 Programming Competition (CCPC)

    Pro&Sol 链接: https://pan.baidu.com/s/17Tt3EPKEQivP2-3OHkYD2A 提取码: wbnu 复制这段内容后打开百度网盘手机App,操作更方便哦 ...

  2. Android studio自带的sample例子

    1. 直接查看Github上面的Sample Sample in GitHub:  点击打开链接 2. FQ下载(个人倾向于下载) 需要FQ工具 goagent goagent在windows下的安装 ...

  3. 使用perconna xtrabackup备份脚本

    使用percona xtrabackup对两个数据库实例进行备份,备份的脚本如下所示: #!/bin/bash BASEDIR="/usr/local/mysql" BIN=&qu ...

  4. 如何修改const常量值

    总结:这个跟计算机语言类别和编译器有关,本文是在linux环境下说明的. 分两种情况: 1. C语言: 2. C++语言: /*! * \Description: * \author scictor ...

  5. STM32L011D4 ----- 使用注意

    下载程序: SWD下载模式,PA14(SWCLK)是作为输入口,但是当单片机进入bootloader模式,PA14变为输出模式,就不能下载程序了. 所以下载程序时,需要配置下载程序的上位机为“conn ...

  6. 序列化serialize与反序列化unserialize

    有利于存储和传递value(除了resource类型外),却不会丢失其原有类型和结构. serialize序列化时会调用魔术方法__sleep(); unserialize反序列化时会调用魔术方法__ ...

  7. Systemd 添加自定义服务(开机自启动)

    Systemd 简介:https://fedoraproject.org/wiki/Systemd/zh-cn 一.service unit 常用命令,以 mysql 服务为例 # 开机启动 syst ...

  8. Web API中的消息处理程序(Message Handler)

    一.消息处理程序的概念 信息处理程序(Message Handler)接收HTTP请求并返回一个HTTP响应的类.Message Handler继承 HttpMessageHandler 类. 通常, ...

  9. 批量获取oracle的表和表字段注释【原】

    批量获取oracle的表和表字段注释 --用户表注释表 SELECT * FROM USER_TAB_COMMENTS WHERE TABLE_NAME LIKE 'WEB_ISC_%'; --显示指 ...

  10. Terminal 快捷键帮助

    Terminal 快捷键帮助 Terminal 快捷键帮助 移动光标至行首 CTRL+A 第一次按时,移动光标至行首: 再次按时,回到原有位置 CTRL+X 移动光标至行尾 CTRL+E 光标向左移动 ...