今天要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. gdb调试线程

    gdb thread apply all bt 如果你发现有那么几个栈停在 pthread_wait 或者类似调用上,大致就可以得出结论:就是它们几个儿女情长,耽误了整个进程. 注意gdb的版本要高于 ...

  2. Linux 多线程 - 线程异步与同步机制

    Linux 多线程 - 线程异步与同步机制 I. 同步机制 线程间的同步机制主要包括三个: 互斥锁:以排他的方式,防止共享资源被并发访问:互斥锁为二元变量, 状态为0-开锁.1-上锁;开锁必须由上锁的 ...

  3. javaMail简介(一)

    一:开发javaMail用到的协议 SMTP(simple Message Transfer Protocal):简单消息传输协议.发送邮件时使用的协议,描述了数据该如何表示,默认端口为:25 POP ...

  4. 绑定本地的Session

    绑定本地的Session图示解析: 代码的结构: 代码: SaveServlet.java package com.itheima.servlet; import java.io.IOExceptio ...

  5. mysql存储过程造数据取一个基准用户的各种类型都取一条数据作为基准数据,循环插入

    CREATE DEFINER=`user`@`%` PROCEDURE `create_upload_data`(in start_userid integer,in create_counter i ...

  6. Zabbix Server 监控Web页面

    Zabbix Server 监控Web页面 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  1>.选中一台可以连接互联网的主机 2>.创建一个web场景,点击“Crea ...

  7. Ubuntu 启动服务 失败 的 可能解决办法

    ➜  ~ service nfs-kernel-server start  Job for nfs-server.service canceled. 如果遇到服务启动失败,请检查有关的文件夹是否创建( ...

  8. mysql批量替换数据

    如题,项目域名迁移,导致原来商城的商品图片无法查看,地址错误. 怎么办?修改数据库图片路径呗!什么几千行呐,开玩笑.这个任务没人接,只有我干咯! 怎么也得不少时间吧,好吧半天,这是上面的要求. 有聪明 ...

  9. MyEclipse做的项目改成eclipse能用的

    转至:https://blog.csdn.net/cymlancy/article/details/67634531 首先导入一个从Myeclipse导出的项目 Myeclipse项目和Eclipse ...

  10. Spark SQL基本概念与基本用法

    1. Spark SQL概述 1.1 什么是Spark SQL Spark SQL是Spark用来处理结构化数据的一个模块,它提供了两个编程抽象分别叫做DataFrame和DataSet,它们用于作为 ...