今天要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. 截取 还没有读的txt章节 生成新的文件

    package file; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; imp ...

  2. http的常用方法和状态码

    http常用的方法: 1.get----> 服务器向客户端发送资源,一般来说,是不需要传入参数就可以查看某些信息. 2.post--->客户端向服务器发送请求,一般来说,是传入参数,服务端 ...

  3. 怎样删除windows server back 备份副本文件

    我用的服务器是windows server 2012 下面说明 第一步:打开windows powershell 第二步:输入命令   DISKSHADOW 第二步:输入 delete shadows ...

  4. SpringCloud之Hystrix断路器以及dashboard 属性详解

    1.自定义hystrixCommand: https://blog.csdn.net/u012702547/article/details/78032191?utm_source=tuicool&am ...

  5. python3: 爬虫---- urllib, beautifulsoup

    最近晚上学习爬虫,首先从基本的开始: python3 将urllib,urllib2集成到urllib中了, urllib可以对指定的网页进行请求下载,  beautifulsoup 可以从杂乱的ht ...

  6. python对象的多重继承

    一个从多个父类继承过来的子类,可以访问所有父类的功能.并不推荐使用. 多重继承最简单有用的形式是mixin.假设在之前Contact类增加一个功能,允许给self.email发送一封邮件. class ...

  7. 01--STL算法(算法基础)

    一:算法概述 算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中 ...

  8. 设计模式---对象性能模式之单例模式(Singleton)

    前提:“对象性能”模式  面向对象很好的解决了“抽象”的问题,但是必不可免地要付出一定的代价.对于通常情况来讲,面向对象的成本大都可以忽略不计.但是某些情况,面向对象所带来的成本必须谨慎处理. 前面是 ...

  9. netty的HelloWorld演示

    pom <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artif ...

  10. python django基础一web框架的本质

    web框架的本质就是一个socket服务端,而浏览器就是一个socker客户端,基于请求做出相应,客户端先请求,服务器做出对应响应 按照http协议的请求发送,服务器按照http协议来相应,这样的通信 ...