笔记-JavaWeb学习之旅8

Window对象-定时器方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        //只执行一次的定时器

         function fun(){

            alert("爆炸");

         }

        //参数:js代码或者方法对象，毫秒值

        //setTimeout(fun,3000);

        //可以反复循环的定时器

        //每隔2秒就执行一次fun对象

        setInterval(fun,2000);

    </script>

</body>

</html>

轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <img src="img/banner_1.jpg" id="1" width="100%">

    <script>

        //每隔3秒就调用一次fun对象

        setInterval(fun,3000);

        var number = 1;

        function fun(){

            number++;

            if(number>3){

                number = 1;

            }

            var img = document.getElementById("1");

            img.src="img/banner_"+number+".jpg";

        }

    </script>

</body>

</html>

Location：地址栏对象

创建Location对象的方式

1.window.location 2.location

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="刷新" id="1">

    <input type="button" value="百度一下" id="2">

    <script>

        //reload方法，刷新

        //获取元素对象，操作元素，让他具备刷新功能

        var but1=document.getElementById("1");

        //绑定单击事件

        but1.onclick = function(){

            location.reload();

        }

        //获取属性href，设置或返回完整的 URL。

        var but2 = document.getElementById("2");

        but2.onclick=function () {

            location.href="https://www.baidu.com";

        }

    </script>

</body>

</html>

History对象

创建：window.history或者history

方法：

back()加载history列表中的前一个URL

forward() 加载history列表中的下一个URL

go（）加载history列表的某一个具体页面

事件监听机制

概念：某些组件被执行了某些操作后，触发默写代码执行

*事件：某些操作，如:单击，双击，键盘按下了，鼠标移动了

*事件源：组件。如：按钮文本输入框

*监听器：代码

*注册监听：将事件，事件源，监听器组合在一起。当事件源发生了某个事件，则触发执行某个代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="#" id="form">

    <input type="text" id="a" name="username">

    <select id="city">

        <option>--请选择--</option>

        <option>北京</option>

        <option>上海</option>

        <option>广州</option>

    </select>

    <input type="submit" value="提交">

    </form>

    <script>

        //点击事件有onclick单击事件和ondblclick双击事件

        // //获取元素对象,绑定ondblclick事件

         var event1 = document.getElementById("a");

        // event1.ondblclick=function () {

        //     alert("鼠标被双击了")

        // }

        // //焦点事件有onblur失去焦点和onfocus元素获得焦点

        // //绑定失去焦点事件

        // event1.onblur=function () {

        //     alert("我失去焦点了");

        // }

        // //绑定得到焦点事件

        // event1.onfocus=function () {

        //     alert("我得到焦点了");

        // }

       //鼠标事件有五种。

        // onmousedown,鼠标按钮被按下，定义该方法时定义一个形参，接收event对象，该对象的button方法可以捕获到哪一个键被点击

        //0代表被左键点击，1代表被中建点击，2代表被右键点击

        // event1.onmousedown=function (ev) {

        //     alert("我被"+ev.button+"点击了");//我被0点击了

        // }

        //onmouseup鼠标按键被松开

       // event1.onmouseup=function (ev) {

       //      alert("鼠标键被松开了");

       // }

        //鼠标移到某元素之上

        // event1.onmouseover=function(){

        //     alert("鼠标来了");

        // }

        //onmouseout鼠标移动方法，不演示

        //onmousemove

        // event1.onmousemove=function () {

        //     alert("鼠标被移动了");

        // }

        //键盘事件有三个onkeydown 摸个键盘按键被按下

        //onkeyup 某个键盘按键被松开 ，onkeypress 某个键盘被按下并松开

        //键盘事件也是会返回一个对象，该对象的方法keyCode可以捕获到哪一个键被按下

        // event1.onkeydown=function (ev) {

        //     alert(ev.keyCode+"键盘被按下了");

        // }

        //选择和改变事件onsubmit 域的内容被改变，onselect 文本被选中

        // var event2=document.getElementById("city");

        // event2.onchange=function () {

        //     //当选择其他城市是就触发代码

        //     alert("城市已更换");

        // }

        //表单事件：onsubmit 事件会在表单中的确认按钮被点击时发生。onreset 事件会在表单中的重置按钮被点击时发生。

        //onsubmit可以阻止表单的提交

        document.getElementById("form").onsubmit=function (ev) {

            //当触发提交按钮时

            //如果用户名正确，就可以提交表单，不正确就不能提交

            var flag = true;

            return flag;

        }

    </script>

</body>

</html>

表格全选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        //改变表格的属性

        table{

            border: 1px solid;

            width: 500px;

            margin-left: 30%;

        }

        td,th{

            text-align:center;

            border:1px solid ;

        }

        div{

            margin-top:10px;

            margin-left:30%;

        }

        .out{

            background-color: white;

        }

        .over{

            background-color: pink;

        }

    </style>

    <script>

        //在页面加载完成后绑定事件

        window.onload=function(){

            //绑定单击事件

            document.getElementById("selectAll").onclick= function() {

                var cbs=document.getElementsByName("cb");

                for(var i=0;i<cbs.length;i++) {

                    cbs[i].checked=true;

                }

            }

            document.getElementById("unSelectAll").onclick= function() {

                var cbs=document.getElementsByName("cb");

                for(var i=0;i<cbs.length;i++) {

                    cbs[i].checked=false;

                }

            }

            document.getElementById("selectRev").onclick= function() {

                var cbs=document.getElementsByName("cb");

                for(var i=0;i<cbs.length;i++) {

                    if(cbs[i].checked){

                        cbs[i].checked=false;

                    }else{

                        cbs[i].checked=true;

                    }

                }

            }

            document.getElementById("a").onclick= function() {

                var cbs=document.getElementsByName("cb");

                for(var i=0;i<cbs.length;i++) {

                        cbs[i].checked=a.checked;

                }

            }

            //给所有tr绑定和鼠标到元素之上和移出元素的事件

            var trs = document.getElementsByTagName("tr");

            for(var i=0;i < trs.length;i++){

                //移到元素之上

                trs[i].onmouseover = function(){

                    this.className="over";

                }

                //移除元素

                trs[i].onmouseout=function () {

                    this.className="out";

                }

            }

        }

    </script>

</head>

<body>

<table>

    <caption>学生信息表</caption>

    <tr>

        <th><input type="checkbox" name="cb" id="a"></th>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>操作</th>

    </tr>

    <tr>

        <td><input type="checkbox" name="cb"></td>

        <td>1</td>

        <td>令狐冲</td>

        <td>男</td>

        <td><a href="javascript:void(0);">删除</a></td>

    </tr>

    <tr>

        <td><input type="checkbox" name="cb"></td>

        <td>2</td>

        <td>任我行</td>

        <td>男</td>

        <td><a href="javascript:void(0);">删除</a></td>

    </tr>

    <tr>

        <td><input type="checkbox" name="cb"></td>

        <td>3</td>

        <td>岳不群</td>

        <td>？</td>

        <td><a href="javascript:void(0);">删除</a></td>

    </tr>

</table>

<div>

    <input type="button" id="selectAll" value="全选">

    <input type="button" id="unSelectAll" value="全不选">

    <input type="button" id="selectRev" value="反选">

</div>

</body>

</html>

Bootstrap

Bootstrap是一个前端开发框架，响应式布局（同一套页面可以兼容不同的分辨率的设备）

响应式布局：

同一套页面可以兼容不同的分辨率的设备

实现：依赖于栅格系统，将一行平均分成12个格子，可以指定元素占几个格子

实现步骤：

1.定义容器，容器分为container和container-fluid两类

2.定义行,样式row

3.定义元素:指定该元素在不同设备上，所占的格子数目，样式：col-设备代号-格子数目

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <style>

        .inner{

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <!--定义容器-->

    <div class="container-fluid">

        <!--定义行-->

        <div class="row">

            <!--定义元素

            在打显示器上一行12个格子  col-lg-1 ---一个元素占一行的1个格子

            在pad上一行6个格子  col-sm-2 ---一个元素占一行2个格子

            -->

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

        </div>

    </div>

</body>

</html>

笔记-JavaWeb学习之旅8的更多相关文章

笔记-JavaWeb学习之旅5
CP30的演示 package cn.itcast.datasourcejdbc; import com.mchange.v2.c3p0.ComboPooledDataSource; import j ...
笔记-JavaWeb学习之旅7
JavaScript基础概念:一门客户端脚本语言,运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎,是一个脚本语言,不需要编译,直接就可以被浏览器解析执行. JavaScript ...
笔记-JavaWeb学习之旅19
Redis:redis是一款高性能的NOSQL系列的非关系型数据库 NOSQL: Not Only SQL ,意即"不仅仅是SQL",是一项全新的数据库理念,泛指非关系型数据库 r ...
笔记-JavaWeb学习之旅18
AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和XML 异步和同步:客户端和服务器端相互通信的基础上同步:客户端操作后必须等待服务器端的响应, ...
笔记-JavaWeb学习之旅17
1.过滤选择器首元素选择器:first 获得选择的元素中的第一个元素尾元素选择器:last获得选择元素中的最后一个元素非元素选择器:not(selector) 不包括指定内容的元素偶数选择器: ...
笔记-JavaWeb学习之旅16
增强对象的功能动态代理:在内存中形成代理类实现步骤: 代理对象和真实对象实现相同的接口代理对象 = Proxy.newProxyInstance(); 使用代理对象调用真实对象的方法增强方法 ...
笔记-JavaWeb学习之旅15
Filter:过滤器概念:当访问服务器的资源是,过滤器可以将请求拦截下来,完成一些特殊的功能快速入门: 步骤: 定义一个类,实现接口Filter 复写方法配置拦截路径 package com.d ...
笔记-JavaWeb学习之旅14
JSTL:JavaServer Pages Tag Library JSP标准标签库 if标签 <%@ page import="java.util.ArrayList" % ...
笔记-JavaWeb学习之旅10
Servlet server applet运行在服务器端的小程序,servlet就是一个接口,定义了Java类被浏览器访问到的规则(Java类重写这个接口,就可以被浏览器(tomcat)识别) Ser ...
笔记-JavaWeb学习之旅13
验证码案列昨天晚上出现的500错误原因在于验证码没有获取到,获取验证码是应该获取的是共享域中的验证码,而我把获取值得键给写成了jsp中的键,而不是内存生成图片中,然后把图片上传到共享域中的键.这两个 ...

随机推荐

linux修改进程的名字
1 修改linux进程名字的基本原理 linux进程以argv[0]作为进程的名字,因此只需要修改argv[0]处的字符串就修改了linux进程的名字. 2 直接修改argv[0]会导致的问题如果名 ...
Red Black Tree 红黑树 AVL trees 2-3 trees 2-3-4 trees B-trees Red-black trees Balanced search tree 平衡搜索树
小结: 1.红黑树:典型的用途是实现关联数组 2.旋转当我们在对红黑树进行插入和删除等操作时,对树做了修改,那么可能会违背红黑树的性质.为了保持红黑树的性质,我们可以通过对树进行旋转,即修改树中某些 ...
PHP Warning: PHP Startup: Unable to load dynamic library '/usr/lib64/php/modules/redis.so' - /usr/lib64/php/modules/redis.so: undefined symbol: igbinary_serialize in Unknown on line 0
网上找到两种解决方法, 1.先删除php-pecl-redis,再用pecl install redis 2.安装php-igbinary模块,不过我安装时包冲突了,没有安装成功,所以用了第一种方法
CMTime 与 CMTimeMakeWithSeconds
1.首先先看代码,这段代码的作用就是要让视频播放区域有个封面.不会显的太空当. - (void)avPlayerDidPlayed:(NSNotification *)noti { [_avPlaye ...
c++中class与struct的区别
0. 结构是一种用关键字struct声明的自定义数据类型.与类相似,也可以包含构造函数,常数,字段,方法,属性,索引器,运算符和嵌套类型. 1.结构在堆栈中创建,是值类型,而类是引用类型.每当需要一种 ...
微信 jssdk 逻辑在 vue 中的运用
微信 jssdk 在 vue 中的简单使用 import wx from 'weixin-js-sdk'; wx.config({ debug: true, appId: '', timestamp: ...
Python模块：os
OS模块常用用法: os.name() #判断当前使用的系统环境,windows则返回 ‘nt’,Linux则返回‘posix’ os.getcwd() #显示当前目录 os.listdir() #以 ...
openssl生成公钥私钥对加解密
在计算机软件开发世界中,编程语言种类极多,数据在各种语言的表现形式可能有所差异,但数据本身的处理可能,或者说本质上是完全一样的:比如数据在某个算法中的运算过程是一样的.在这里,我以加密与解密来作为例子 ...
怎样安装CentOS 6.6之三：磁盘分区的划分和修改
安装 CentOS(或Linux)系统,最难的就是磁盘分区.磁盘分区需要根据自己的实际使用需要来规划,以达到最优的效果. 工具/原料 CentOS 6.6 安装包 VMware 虚拟机一.划分方 ...
使用 Git 命令去管理项目的版本控制（一）
参考资料:参考参考声明本文是作者原创,是自己的学习笔记,仅供学习参考. 在 10.11.2Mac系统中,要显示隐藏的文件夹使用命令行: defaults write com.apple.find ...