详解JavaScript实现JS弹窗的三种方式

目录
  • 一、前言
  • 二、什么是JavaScript,有什么用?
  • 三、HTML嵌入JavaScript的方式:
    • 第一种方式:
    • 第二种方式:
    • 第三种方式:
  • 总结

一、前言

html和css的学习大致完成,我们进入重要的JavaScript学习阶段

二、什么是JavaScript,有什么用?

Javascript是运行在浏览器上的脚本语言。简称JS。

他的出现让原来静态的页面动起来了,更加的生动。

三、HTML嵌入JavaScript的方式:

第一种方式:

1、要实现的功能:

用户点击以下按钮,弹出消息框。

2、弹窗

JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】,而事件句柄是以HTML标签的属性存在的。

3、οnclick=js代码",执行原理是什么?

页面打开的时候,js代码并不会执行,只是把这段ss代码注册到按钮的click事件上了。等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。

4、    怎么使用JS代码弹出消息框?    

在JS中有一个内置的对象叫做window,    全部小写,可以直接拿来使用,window代表的是浏览器对象。  window对象有一个函数叫做:alert,用法是:window.alert("消息");这样就可以弹窗了。

5、window.可以省略

下面两个等价
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick="alert('hello world')"/>

 6、设置多个alert可以一直弹窗

<input type="button" value="hello" onclick="alert(hello java")
                                            alert(hello python')
                                            alert('hello javaScript!)"/>

JS中的字符串可以使用双引号,也可以使用单引号。JS中的一条语句结束之后可以使用分号";"也可以不用。

<input type="button" value="hello" onclick="alert('hello world')"/>无分号,内单外双引号
<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号,内双外单引号

整体代码:

<!doctype html>
<htm1>
   <head>
     <title>JavaScript第一种</title>
   </head>
  <body>
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick='window.alert("hello jscode")'/>
<input type="button" value="hello" onclick="alert('hello zhangsan');
                                            alert('hello lisi');
                                            alert('hello wangwu')"/>
 </body>
</html>

 弹窗效果:

第二种方式:

脚本如:

   <script type="text/javascript">
        window.alert("Hello JavaScript")
     </script>
  • javascript的脚本块在一个页面当中可以出现多次。
  • javascript的脚本块出现位置也没有要求。

如:

 <script type="text/javascript">
        window.alert("head ");
        window.alert("Hello World!")
      </script>
<!doctype html>
  <html>
    <head>
       <title>HTML中嵌入JS代码的第二种方式</title>
    </head>
    <body>
      <script type="text/javascript">
        window.alert("min");
        window.alert("Hello World!")
      </script>
<input type="button"value="按钮"/>
</body>
</html>
      <script type="text/javascript">
        window.alert("last");
        window.alert("Hello World!")
      </script>

alert有阻塞当前页面加载的作用。(阻挡,直到用户点击确定按钮。

在脚本块当中的程序,在页面打开的时候执行并且遵守自上而下的顺序依次逐行执行。     (这个代码的执行不需要事件,即运行就开始)

第三种方式:

引入外部独立的js文件如,外部文件路径

<!doctype	html>
  <html>
    <head>
       <title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
   </head>
  <body>
  <!--这个src表示路径,在text目录的1.js文件  -->
   <script type="text/javascript" src="text/1.js"></script>
  </body>
 </html>

在需要的位置引入js脚本文件

引入外部独立的js文件的时候,js文件中的代码会遵循自上而下的顺序依次逐行执行。

①在引入的外部脚本中又加alert,则这个不会生效

②需要另外写一个才会生效

如:

<!doctype	html>
  <html>
    <head>
       <title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
   </head>
  <body>
  <!--这个src表示路径,在text目录的1.js文件  -->
   <script type="text/javascript" src="text/1.js">
  <!--下面这个不会起作用 -->
     window.alert("hello");
  </script>
<!--需要另外写一个脚本才会生效,如: -->
<script type="text/javascript">
 window.alert("hello");
 </script>
  </body>
 </html>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2022-01-08

原生js实现弹窗消息动画

本文实例为大家分享了js实现弹窗消息的具体代码,供大家参考,具体内容如下 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

JS实现自定义弹窗功能

众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在 慕课网 上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本) HTML部分:(没什么内容 放置一个按钮调用函数,js中调用实例即可供参考) <!DOCTYPE html

js实现点击弹窗弹出登录框

本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码,供大家参考,具体内容如下 1 图片预览 2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

js实现弹窗暗层效果

话不多说,请看示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"&g

js实现弹窗效果

本文实例为大家分享了js实现弹窗效果的具体代码,供大家参考,具体内容如下 思路: 1.创建一个按钮,点击弹出弹窗 2.建立一个弹窗页面 固定定位 默认隐藏 3.将弹窗内容放在弹窗页面的中间 4.js将事件绑定按钮,点击后让弹窗页面显示 5.js事件绑定span标签,点击后让弹窗页面消失 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

js 右下角弹窗效果代码(IE only)

右下角弹窗效果练习 function $(obj){ return document.getElementById(obj); } function pop(obj){ var h = parseInt($("popDiv").currentStyle.height); $("popDiv").style.height = (h + obj) + "px"; if(parseInt($("popDiv").style.heig

js点击弹出div层实现可拖曳的弹窗效果

弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad

JS+CSS3制作炫酷的弹窗效果

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

JS实现可拖曳、可关闭的弹窗效果

本文实例讲述了JS实现可拖曳.可关闭的弹窗效果.分享给大家供大家参考.具体如下: 运行该实例,点击文字,弹出一个窗口,其实是一个弹出层,这个弹出层可以随鼠标拖曳,另外,示例演示了用本方法弹出文字层和弹出图片层的具体代码,请根据选择使用哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-draw-close-able-alert-dlg-demo/ 具体代码如下: <!DOCTYPE HTML> <html> <head

JS实现下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style> *{ margin: 0px; padding: 0px; } .menu{ width: 1100px; height: 30px; background-image: url(img/魅力罗兰Music炫图18.jpg); margin-left: 200px; margin-top: 50px; } .btn{ width: 183.3px; height: 30px; float: left; text-align: center; line-height

jQuery实现优雅的弹窗效果(6)

弹窗是网页中经常看到的效果,以前的弹窗是用window.open()等方式在浏览器窗口新建另一个新窗口来完成的,这种弹窗方式现在已经被很多浏览器所拦截.今天我们来用更加友好的方式来实现弹窗效果.完成的功能效果如图: 如图,在浏览器的左上方是两个button按钮,按下之后分别弹出左下角的窗口和中间的窗口,右下角的窗口当页面加载完成之后自动慢慢显示,之后又徐徐的淡出.基于div+css的模式,我们的先来建立html页面. window.html <!DOCTYPE html PUBLIC "-

简单实现jQuery弹窗效果

本文实例为大家分享了jQuery弹窗效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗</title> <script type="text/javascript" src="../jquery-3.2.1.min.js&

juery框架写的弹窗效果适合新手

本人新手写点代码有点村,希望大家多多包含!!!!!! 复制代码 代码如下: <html> <head> <title>js弹窗效果</title> <meta http-equiv="content-type" content="text/html charset=gb2312"> <script language="javascript" src="jquery-1.4

jQuery 中msgTips 顶部弹窗效果实现代码

最近发现好多网站都采用顶部弹窗,并且不用用户手动去点击确定.感觉这样很方便用户,所以也找了好多大神的代码,整理一下方便以后查找 前端: @{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo