java script （二）

实现轮播图

　　获取元素 document.getElementById("id名称")

　　事件（onlond） onlond = "changeImg()" 在<script>中function changeImg(){ document.getElementById("img").src = "图片地址"}

　　定时操作：setInterval(code,millisec[,"lang"]) code 必需。要调用的函数或要执行的代码串；millisec必需，周期性执行或调用code之间的时间间隔以毫秒计算。 setInterval("changeImg()",3000)

　　总代码：

弹出广告图

　　获取图片位置document.getElementById("id名称")

　　隐藏图片：display：none

　　定时操作：setInterval("显示图片的函数",3000);

　　步骤分析：

　　　　一：在页面指定位置隐藏一个广告图片（使用display属性的none值）<img>标签中设置<img src="#" width="100%" style="display: none" id="img2"/>

　　　　二：确定事件（onload）并为其绑定一个函数 function init(){time=setInterval("showad()",3000);}

　　　　三：书写这个函数（设置一个现实图片的定时操作）function showad(){var adEle = document.getElementById("img2");adEle.style.display="block";clearInterval(time);time = setInterval("hiddenAd()",3000);}

　　　　四：书写定时器中的函数（获取广告图片的位置并设置属性stule的display值block）adEle.style.display="block";

　　　　五：清除显示图片的定时操作clearInterval(time);

　　　　六：书写隐藏图片的定时操作;time = setInterval("hiddenAd()",3000);

　　　　七：书写定时器中的函数（获取广告图片的位置并设置属性style的display值none）function hiddenAd(){document.getElementById("img2").style.display="none";clearInterval(time);}

　　　　八：清除隐藏图片的定时操作clearInterval(time);

BOM对象

　　window对象：

　　　　widnow对象表示在浏览器中打开的窗口

　　　　常用方法：在前面的案例中有应用。

　　　　　　alert（）：显示带有一段消息和一个确认按钮的警告框

　　　　　　clearInterval():取消由setInterval()设置的timeout 该方法只能清除由 setInterval 设置的定时操作 clearInterval(time);

　　　　　　clearTimeout():取消由setTimeout()方法设置的timeout 该方法只能清除由 setTimeout 设置的定时操作

　　　　　　confirm（）：显示带有一段消息及确认按钮和取消按钮的对话框 confirm("您确认删除吗？");

　　　　　　prompt()显示可提示用户输入的对话框

　　　　　　setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式它有一个返回值，主要是提供给 clearInterval 使用。 time = setInterval("hiddenAd()",3000);

　　　　　　setTimeout():在指定的毫秒后调用函数或计算表达式有一个返回值，主要是提供给 clearTimeout 使用。

　　location对象

　　　　对象包含有关当前URL的信息

　　　　常用对象属性：

　　　　　　href:设置或返回完整的URL 在<script>标签中 Window.location.href="http://itcast.cn";

　　　　history对象方法

　　　　　　back（）：加载history列表中的前一个URL<input type="button" value="返回上一个页面" οnclick="javascript:history.back()"/>

　　　　　　forward（）：加载history列表中的下一个url

　　　　　　go():加载history列表中的某个具体页面参数-1返回上一个历史页面；-2返回上上一个历史页面记录，1进入下一个历史页面记录，0让按钮点击失效 onlick="javascript:volid(0)"

　　navigator对象

　　　　navigator对象包含浏览起的信息。（该对象开发中不怎么用）

　　screen对象

　　　　screen对象包含有关客户端显示屏幕的信息（开发中不常用）

实现表格隔行换颜色效果

　　新内容：

　　　　在<table>标签框中：<thead> <tr> <th></th></tr></thead> <tbody><tr> <td></td></tr></tbody> <thead>标签定义的是表格的头部<tbody>标签定义的是表格的身体部分，在这两个标签使用的时候，注意其中的<tr><th><td>的使用情况

　　确定事件：（页面加载事件onload）

　　获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

　　Tbody里面的行数(rows.length)

　　设置背景颜色(.style.backgroundColor)

　　步骤分析

　　　　第一步：确定事件(onload)并为其绑定一个函数window.onload = function(){var tblEle = document.getElementById("tbl"); var len=tblEle.tBodies[0].rows.length;//alert(len);for(var i=0;i<len;i++){if(i%2==0){tblEle.tBodies[0].rows[i].style.backgroundColor="pink";}else{tblEle.tBodies[0].rows[i].style.backgroundColor="gold";}}} id地址书写在<table>标签中

　　　　第二步：书写函数(获取表格)var tblEle = document.getElementById("tbl");

　　　　第三步：获取tbody里面的行数var len=tblEle.tBodies[0].rows.length; 在js中没有集合，只有数组

　　　　第四步：对tbody里面的行进行遍历

　　　　第五步：获取奇数行和偶数行(角标对2取余)

　　　　第六步：分别对奇数行和偶数行设置背景颜色tblEle.tBodies[0].rows[i].style.backgroundColor="gold";

表格高亮显示：

　　事件：onmouseover鼠标移动到某元素上和onmouseout鼠标从某元素移开

　　步骤：

　　　　第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数<tr οnmοuseοver="changeColor('tr1','over')" id="tr1" οnmοuseοut="changeColor('tr1','out')">

　　　第二步：获取鼠标移上去的那行，对其设置背景颜色function changeColor(id,flag){if(flag=="over"){document.getElementById(id).style.backgroundColor="red";}else if(flag=="out"){document.getElementById(id).style.backgroundColor="white";}}

全选和全不选

　事件：(鼠标单击事件onclick)

　步骤：

　　　　第一步：确定事件(onclick)并为其绑定一个函数th><input type="checkbox" οnclick="checkAll()" id="checkAll"/></th>

　　　　第二步：书写函数(获取编号前面的复选框，获取其状态)function checkAll(){var checkAllEle = document.getElementById("checkAll");

if(checkAllEle.checked==true){var checkones = document.getElementsByName("checkone");for(var i=0;i<checkones.length;i++){checkones[i].checked=true;}}else{var checkones = document.getElementsByName("checkone");for(var i=1;i<checkones.length;i++){checkones[i].checked=false;}}

　　　　第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)if(checkAllEle.checked==true){var checkones = document.getElementsByName("checkone");for(var i=0;i<checkones.length;i++){checkones[i].checked=true;}

　　　　第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)var checkones = document.getElementsByName("checkone");for(var i=1;i<checkones.length;i++){checkones[i].checked=false;}

二级联动

　　事件(onchange)

　　　　使用方法：

　　　　　　将某元素添加 appendChild()

　　　　　　以下两个方法很重要，但是在手册中查不到！

　　　　　　创建文本节点：document.createTextNode()

　　　　　　创建元素节点：document.createElement()

　　步骤：

　　　　第一步：确定事件(onchange)并为其绑定一个函数

　　　　第二步：创建一个二维数组用于存储省份和城市

　　　　第三步：获取用户选择的省份

　　　　第四步：遍历二维数组中的省份

　　　　第五步：将遍历的省份与用户选择的省份比较

　　　　第六步：如果相同，遍历该省份下所有的城市

　　　　第七步：创建城市文本节点

　　　　第八步：创建option元素节点

　　　　第九步：将城市文本节点添加到option元素节点中去

　　　　第十步：获取第二个下拉列表，并将option元素节点添加进去

　　　　第十一步：每次操作前清空第二个下拉列表的option内容。

　　代码：

　　　　<script> //1.创建一个二维数组用于存储省份和城市var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");function changeCity(val){ //7.获取第二个下拉列表 var cityEle = document.getElementById("city"); //9.清空第二个下拉列表的option内容 cityEle.options.length=0; //2.遍历二维数组中的省份 for(var i=0;i<cities.length;i++){ //注意，比较的是角标 if(val==i){ //3.遍历用户选择的省份下的城市 for(var j=0;j<cities[i].length;j++){ //alert(cities[i][j]); //4.创建城市的文本节点 var textNode = document.createTextNode(cities[i][j]); //5.创建option元素节点var opEle = document.createElement("option"); //6.将城市的文本节点添加到option元素节点 opEle.appendChild(textNode); //8.将option元素节点添加到第二个下拉列表中去 cityEle.appendChild(opEle); } }} }</script>

　　Html代码：

　　　　<select οnchange="changeCity(this.value)"><option>--请选择--</option> <option value="0">湖北</option><option value="1">湖南</option> <option value="2">河北</option><option value="3">河南</option></select><select id="city"></select>

转载于:https://www.cnblogs.com/haowenliang/p/9355195.html

java script （二）相关推荐

java script error_java script error 错误解决方法
用了动易这么久了,有时一不小心改错模版文件或者修改相关的JS,就会导致页面出现一些奇怪了的弹出框说什么 java script error 错误,烦死了. 今天特别研究了下,找到了解决这类问题的 ...
java script check radio
java script check radio <script> function check(){ ??? for (var i=0;i<document.form1.elemen ...
Java生成二维码底部带文字并且返回前端使用img接收
目录 1.java生成二维码工具类 2.web测试 3.前端处理 4.测试结果背景本demo主要针对jdk1.6版本的,但是高版本的同样可以用,如果觉得不舒服可以自行添加高版本的依赖包. 准备工具 ...
分享一个Java生成二维码工具类
分享一个Java生成二维码工具类直接上代码: 1.CodeUtil.class package top.lrshuai.blog.util;import java.awt.BasicStroke; ...
[微信小程序基础]Java Script从入门到放弃之首次接触Java Script
文章目录前言一.JS入门学习之路二.第一章: 做好准备 1.如何插入JS程序 2.如何引用外部JS文件 3.认识语句和符号 4.注释很重要 5.什么是变量 6.判断语句 7.什么是函数三.第二 ...
Java Script
一.JavaScript 简介 1.介绍是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言. 脚本简单的说就是一条条的文字命令,并按照程序执行. J ...
java语言二维数组转置_java实现二维数组转置的方法示例
本文实例讲述了java实现二维数组转置的方法.分享给大家供大家参考,具体如下: 这里在文件中创建Test2.Exchange.Out三个类在Exchange类中编写exchange()方法,在方法中 ...
屏蔽“网页上有错误”提示，屏蔽java script 错误的代码
<script> window.onerror=hide_error_message; function hide_error_message() {return true;} </ ...
java 生成二维码 QRCode、zxing 两种方式
版权声明:本文为 testcs_dn(微wx笑) 原创文章,非商用自由转载-保持署名-注明出处,谢谢. https://blog.csdn.net/testcs_dn/article/details/ ...
java ug二次开发_使用Java进行UG二次开发：简单的例子（上） | 学步园
最近因为要进行TeamCenter二次开发(胖客户端定制),所有要开始研究Java了.因此突发奇想为什么不能使用Java进行二次开发呢?现在对UG进行的开发以C/C++应用为主.大多数使用的是原来的U ...

java script （二）

java script （二）相关推荐

最新文章

热门文章