JavaScript学习笔记3

最新推荐文章于 2021-05-31 01:15:27 发布
最新推荐文章于 2021-05-31 01:15:27 发布
阅读量612 收藏
点赞数
文章标签： javascript function border input div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ransiee918/article/details/4228092
版权

3。1 document 对象的常用属性和方法介绍

3。1。1 属性
bgColor 常用的背景色设定
3。1。2 方法
getElementById()    根据HTML元素指定的ID，获得唯一的一个HTML元素，如访问DIV层对象，图版IMG对象等
getElementByName()  根据HTML元素指定的NAME，获得相同名称的一组元素，如访问表单元素（全选功能）
    示例1 改变背景色
<html>
<head>
<title>通过document对象相关属性动态改变背景色</title>
<script language="javascript">
function change(color)
   {
      document.bgColor=color;
   }
</script>
</head>
<body>
<h2>移过来我变色给你看看！</h2>
<font size=4>
<span onMouseOver="change('red')">变红色</span>|<span onMouseOver="change('blue')">变蓝色</span>|<span onMouseOver="change('yellow')">变黄色</span>
</font>
</body>
</html>
3。2 制作浮动的广告图片
    使用DIV层各javaScript可以实现，先在页面添加一个层，并把图片放在层中；然后，使用JavaScript控制层的位置坐标，让其随滚动条同步移动，并且总保持层位于页面的左上角。
    示例2：
<html>
<head>
<title></title>
<script language="JavaScript">
   var advInitTop=0;
   function move()
   {
      document.getElementById("advLayer").style.PixelTop=advInitTop+document.body.scrollTop;
   }
   window.οnscrοll=move;
</script>
</head>
<body>
<div id="advLayer" style="position:absolute;left:16px;top:129px; width:180px;height:230px;z-index:1;">
  <img src="images/advpic.gif" width="180" height="230">
</div>
<p>&nbsp;</p>
<p><img src="images/contentpic.jpg" width="993" height="1799"></p>
<p>&nbsp;</p>
</body>
</html>
    示例说明pixelTop属性返回的是一个像素的值，就不用进行类型的转换了，而用top属性返回的是一个有单位的字符串如：“129px”这样就必须使用类型转换。同理left和pixelLeft一样的，另外，通过document对象的body的scrollTop和scrollTopLeft属性来获取纵向滚动条和横向滚动条所卷去的部分值。此外，使用getElementById()方法获取层对象，如本例：document.getElementById("advLayer")，便于对层的访问和控制。在网页中浏器窗口在左上角默认为原点（0。0）位置。HTML对象的起点位置在坐标（X，Y）一般要别使用left和top属性表示。<div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;'>
3。3 制作带关闭按钮的浮动窗口
3。3。1 带关闭按钮的浮动窗口
    使用DIV层和JavaScript可以实现。在示例2的基础上，现添加一个层，并把“关闭图片”放在层中，随后调整层的位置，让其位于广告层的右上方，然后给“关闭图片”所在的层添加mouseOnClick事件。
    示例3：
<html>
<head>
<title></title>
<script laguage="javascript">
    var advInitTop=0;
    function inix()
    {
       advInitTop=document.getElementById("advLayer").style.pixelTop;
    }
    function move()
    {
       document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;
    }
    function closeMe()
    {
       document.getElementById("closeLayer").style.display="none";
       document.getElementById("advLayer").style.display="none";
    }
    window.οnscrοll=move;
</script>
</head>
<doby onLoad="inix()">
<div id="closeLayer" onClick="closeMe()" style="position:absolute;left:166px;top:132px;width:13px;height:13px;z-index:2;"
>
   <img src="images/close.jpg" width="26" height="18">
</div>
<p>&nbsp;<p>
<p>
   <img src="images/contentpic.jpg" width="933" height="1799"></p>
<p>&nbsp;</p>
   <div id="advLayer" style="position:absolute;left:16px; top:129px;width:144px; height:95px;z-index:1;">
   <A href="http://www.taobao.com">
   <img src="images/advpic.gif" width="180" height="230" border="0">
   </A>
   </div>
</body>
</html>
3。3。2 关闭按钮随滚动条同步滚动的浮动窗口
    示例4：
function inix()
   {
      advInitTop=document.getElementById("advlayer").style.pixelTop;
      closeInitTop=document.getElementById("closeLayer").style.pixelTop;
   }
function move()
   {
      document.getElementById("advLayer").style.pixelTop+advInitTop+document.body,scrollTop;
      document.getElementById("closeLayer").style.pixelTop=closeInitTop+documnet.body.scrollTop;
   }
3。4 制作实现全选效果
    得选框被选中的属性是checked true or false,先把复选框的名字设置为同一个名字，然后使用复选框数组，再使用循环语句来设置所有复选框的checked属性为true，从来实现全选效果。
    示例5：
<html>
<head>
<title></title>
<script laguage="JavaScript">
   function checkAll(boolValue)
   {
      var allCheckboxs=documnet.getElementsByName("isBuy");
      for (var i=0;i<allCheckBoxs.length;i++)
      {
         if (allCheckBoxs[i].type=="checkbox")
             allCheckBoxs[i].checked=boolValue;
      }
   }
</script>
</head>
<body>
   <form action="" name="buyForm" method="post">
   <table width="100%" border="0">
   <tr>
   <td colspan="3">
      <img src="images/head.jpg" width="958" height="175">
   </td>
   </tr>
   <tr>
   <td width="6%">
   <A href="javascript:checkAll(true)">全选</A>
   </td>
   <td width="6%">
   <A href="javascript:checkAll(false)">全不选</A>
   </td>
   <td width="88%">
      <img src="images/top.jpg" width="845" height="18">
   </td>
   </tr>
   <tr>
   <td colspan="2" align="center">
      <input type="checkbox" id="isBuy" name="isBuy" value="sanguo">
   </td>
   <td>
      <img src="images/one.jpg" width="843" height="80">
   </td>
   </tr>
   <tr>
   <td colspan="3" align="center">
      <hr noshade="noshade" style="border:1px #CCCCCC dashed"/>
   </td>
   </tr>
   <tr>
   <td colspan="2" align="center">
      <input type="checkbox" id="isBuy" name="isBuy" value="paozhu">
   </td>
   <td>
      <img src="images/two.jpg" width="842" height="79">
   </td>
   </tr>
   <tr>
   <td colspan="3" align="center">
      <hr noshade="noshade" style="border:1px #CCCCCC dashed"/>
   </td>
   </tr>
   <tr>
   <td colspan="2" align="center">
      <input type="checkbox" id="isBus" name="isBuy" value="paozhu">
   </td>
   <td><img src="images/three.jpg" width="844" height="81"></td>
   </tr>
   <tr>
   <td colspan="3" align="center">
      <hr noshade="noshade" style="border:1px #CCCCCC doshed"/>
   </td>
   </tr>
   <tr>
   <td colspan="2" align="center">
      <input type="checkbox" id="isBuy" name="isBuy" value="jingwu">
   </td>
   <td>
      <img src="images/four.jpg" width="847" height="85"></td>
   </tr>
   <tr>
   <td colspan="3" align="center">
       <hr noshade="noshade" style="border:1px #CCCCCC dashed"/>
   </td>
   </tr>
   </table>
   </form>
   </body>
   </html>

ransiee918
关注
JSDOM编程：通过按钮改变背景页面颜色和隐藏或显示div
lucky_strike2you的博客
04-07 1393
通过按钮改变背景页面颜色和隐藏或显示div 本帖是对JSDOM编程的练习： 设置四个不同颜色按钮，当鼠标悬浮到按钮之上，页面显示相应背景颜色，当鼠标移开并不选择按钮，页面背景颜色变回白色。 设置一个按钮，控制页面某个div的显示，一开始div显示，按钮显示“隐藏”，此时点击按钮，div隐藏并把按钮变成“显示”，再次单击按钮，div出现并把按钮变成“隐藏”。 <!DOCTYPE html&...
js java 改变字体颜色,JS实现改变HTML上文字颜色和内容的方法
weixin_33481663的博客
03-12 604
本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考，具体如下：1. JavaScript Day 1 // to change the color of an object.function changeColor(){x=document.getElementById("Id1");x.style.color="Red";}// to change the conte...
html语言怎么改变字体颜色,JS实现改变HTML上文字颜色和内容的方法
weixin_42121272的博客
05-31 2106
本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考，具体如下：1. JavaScript Day 1 // to change the color of an object.function changeColor(){x=document.getElementById("Id1");x.style.color="Red";}// to change the conte...
DOM编程之document对象
技术改变命运,创新驱动中国
03-04 1145
DOM编程之document对象
发布一个带呼吸灯效果的函数changeColor
andand3600的专栏
05-07 399
折腾了一晚上，终于自己全程手写出一个颜色渐变的函数，很兴奋的感觉，之前做出来的，不是渐变，是闪烁 目前在FF、IE6-8都可以用，反而IE9不行了，还不知道什么原因 先上代码吧 工具类： //工具:获取真正样式 myBlog.tools.getStyle = function (obj,attr){ if(obj.currentSty...
Javascript学习笔记3 作用域
01-19
在Javascript，全局环境本身就一个对象。在浏览器宿主中这个对象是window，而当Javascript用于其它非浏览器的宿主，如嵌入式的环境中，可能会是其它的对象。 在这里也纠正一个观念，有很多人都认为Javascript只在...
javascript学习笔记3
08-01
javascript 中cookie与ajax 的基础知识总结
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
简单的javascript特效可拖动图层、通过document对象相关属性动态改变背景色、浮动广告、广告窗口、弹窗选择
03-19
可拖动图层、通过document对象相关属性动态改变背景色、浮动广告、广告窗口、弹窗选择
JS中的call()方法和apply()方法用法总结
热门推荐
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-27 18万+
JacvaScript中的call()方法和apply()方法， 1. 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。 2. 相同点：这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。
字体颜色动态变换
weixin_30611509的博客
12-22 482
js设置html字体颜色动态变换 一、如果只是两种颜色轮换 <head> <script> function changecolor() { var b=document.getElementById("a").style.color; if(b=="red"){document.getElementById("a").style.co...
JavaScript 实现点击div换颜色
cyanciel的专栏
12-27 2万+
Change Color 点我试试 //这个事件的目的是：当我们点击时要怎么处理 function changeColor(obj) { //因为JS会把HTML标签当做一个对象 //对象.属性 = 值; obj.style.background = 'pink'; }
changecolor
Vivian_shuang的博客
07-13 1049
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> #div1{ width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left:
javaScript:转换十六进制（change color）
goushaoping04的专栏
09-08 1178
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档var myRed=0;var myGreen=0;var myBlue=0;var ntime=1;function myBBgColor(){ if(ntime==1) {  myRed++;  if(myR
js设置颜色闪烁的两种方法
qq_36173194的博客
09-23 7878
第一种：无序闪烁 function changeColor() { var color="orange|#FFFFFF"; color=color.split("|"); $("#setxfld").css("background",color[parseInt(Math.random() * color.length)]);
js实现点击按钮变换背景颜色
sweetyhyh的博客
05-28 2万+
js实现点击按钮变换背景颜色 function aa(){ document.bgColor="Orange"; } function change(c){ document.bgColor=c; }
$(function(){}) ,$(document).ready(function(){}) ,jQuery(function($){ }) , (function($){})
qq517497046的博客
03-17 288
$(function(){ //... })jQuery(function($){ //... })$(document).ready(function(){ //... })(function(){ //... })(jQuery)前面三种是一个作用,代表文档加载完成之后执行的函数. 第四个是(function(arg){…})(param)形式的匿名函数,并且立
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值