1.1 应用 String对象截取特定文字

  利用String 对象的charAt() 和 substring() 方法等，截取特定文字或字段文字显示在页面上

 <html>

  <head>

   <meta http-equiv="Content-Type" content="text/html"; charset="gb2312">

   <title>字符串对象应用实例</title>

   <script language="JavaScript">

        <!--

         function CheckSpace(string)

         {

             var  index,len

              while(true)

              {

                  index=string.indexOf(" ");

                  //如果没有空格，就终止

                   if(index==-1)

                   break;

                   //求出字符串的长度

                   len=string.length;

                   //删除空格

                   string=string.substring(0,index)+string.substring((index+1),len);

                }

             return string

          }

         -->

  </script>

 </head>

 <body>

     <script language="JavaScript">

           <!--

               var s1=new String("I love China !");

               document.write("<h1>[1]"+s1.charAt(7)+"<br>");

               var s2=new String("中国首都是北京");

               document.write("[2]"+s2.charAt(4)+"<br>");

               var s3=new String("I love China !");

               document.write("[3]"+s3.substring(1,6)+"<br>");

               document.write("[4]"+"中国的首都是北京".substring(0,5)+"<br>");

               document.write("[5]"+"I love China !".substring(4)+"<br>");

               document.write("[6]"+"I love China !".substring(5,2)+"<br>");

               document.write("<h1>");

               var str=""

               str+=CheckSpace("I am a student.")+"\n";

               str+=CheckSpace("成了一名 奥运 志愿者!");

               alert(str);

            -->

       </script>

 </body>

 </html>

1.2 应用 Image 对象实现动画

 <html>

    <head>

    <title>应用image对象实现动画</title>

    </head>

    <script  language="JavaScpript">

      var  myImage=new Array[10];

       for(i=0;i<11; i++)

              myImage[i] =new Image();

       myImage[0].src="pic/t0.jpg";

       myImage[1].src="pic/t1.jpg";

       myImage[2].src="pic/t2.jpg";

       myImage[3].src="pic/t3.jpg";

       myImage[4].src="pic/t4.jpg";

       myImage[5].src="pic/t5.jpg";

       myImage[6].src="pic/t6.jpg";

       myImage[7].src="pic/t7.jpg";

       myImage[8].src="pic/t8.jpg";

       myImage[9].src="pic/t9.jpg";

       myImage[10].src="pic/t10.jpg";

       var k=0;

            function  changePIC(){

            document.mi1.src=[k].src;

            k++;

            if(k==9)

               k=0;

            setTimeout(changePIC,200);

       }

   </script>

   <body>

      <img name="mi1"  src="pic/t0.jpg">

       <script  language="JavaScript">

             changPIC();

        </script>

   </body>

 </html>

1.3 Style 对象应用

 <html>

  <head>

       <title>style 对象应用</title>

 </head>

 <script  language="JavaScript">

      function  changeTablePro(){

          MTB.style.borderLeft="solid  red 2px";

          MTB.style.borderRight="solid  red 2px";

          MTD1.style.borderLeft="solid  blue 2px";

          MTD1.style.borderRight="solid  blue 2px";

          MTD2.style.borderLeft="solid  blue 2px";

          MTD2.style.borderRight="solid  blue 2px";

          MTD3.style.borderLeft="solid  blue 2px";

          MTD3.style.borderRight="solid  blue 2px";

          MTD4.style.borderLeft="solid  blue 2px";

          MTD4.style.borderRight="solid  blue 2px";

    }

     function resetTablePro(){

          MTB.style.borderLeft="solid  blue 1px";

          MTB.style.borderRight="solid  blue 1px";

          MTD1.style.borderLeft="solid  red 1px";

          MTD1.style.borderRight="solid  red 1px";

          MTD2.style.borderLeft="solid  red 1px";

          MTD2.style.borderRight="solid  red 1px";

          MTD3.style.borderLeft="solid  red 1px";

          MTD3.style.borderRight="solid  red 1px";

          MTD4.style.borderLeft="solid  red 1px";

          MTD4.style.borderRight="solid  red 1px";

     }

 <script>

 <body id="BD"  style="background:url(back49.gif)repeat fixed;">

   <p>

   <br>

   <pre>

    这里是关于style 对象的应用实例，我们将通过对 style 对象的应用来改变页面的背景属性

   <br>

   </pre>

   <from>

       <input type="button" value="背景图像滚动" onclick="JavaScript:BD.style.backgroundAttachment='scroll' ">

       <input type="button" value="背景图像静止"  onclick="JavaScript:BD.style.backgroundAttachment='fixed'">

 <p>

        <input type="button" value="清除背景图像" onclick="JavaScript:BD.style.backgroundImage=' ' ">

         <input type="button" value="添加背景图像" onclick="JavaScript:BD.style.backgroundImage='url(back49.gif)'">

 <p>

         <input  type="button" value="还 原 背 景 初 始 设 置"  onclick="JavaScript:BD.style.background='url(back49.gif)repeat fixed'">

 <p>

         <input type="button  value="改变表格边框属性""  onclick="changeTablePro()">

 <p>

         <input type="button  value="还原表格初始设置" onclick="resetTabelPro()">

  </from>

 <p>

  <table id="MTB" style="border-left:solid blue 1px;border-right:dotted blue 1px;">

   <tr>

       <td id="MTD1" style="border-left:solid red 1px;border-right:solid 1px;padding:10px;spacing:10px;">

        <pre>

          这个实例中，初始化设置了网页背景图像，在水平和垂直方向重复显示并静止不动，不随滚动条的拖动而滚动。

        </pre>

       </td>

       <td id="MTD2" style="border-left:solid red 1px;border-right:solid 1px;padding:10px;spacing:10px;">

       <pre>

         当利用鼠标单击各个按钮是，会见到所发生的改变。

       </pre>

       </td>

   </tr>

   <tr>

        <td id="MTD3" style="border-left:solid red 1px;border-right:solid red 1px;padding:10px;spacing:10px;">

      <pre>

        每一种改变和变化，都是针对特定的id 才随着变化的。

      </pre>

      </td>

       <td id="MTD4" style="border-left:solid red 1px;border-right:solid red 1px;padding:10px;spacing:10px;">

      <pre>

        本实例中的六个按钮，执行相应程序后会对页面背景属性，表格属性进行更改。

       程序代码中都采用 style 对象属性来调用相应的属性，进行控制实现各种变化。

      </pre>

      </td>

   </tr>

 </table>

 </body>

 </html>

JavaScript对象应用-字符串和图片对象的更多相关文章

  1. javaScript 将json字符串转换为json对象的方法解析

    JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对 ...

  2. JavaScript中JSON字符串和JSON对象相互转化

    JSON字符串转化为JSON对象的2种方式 一.使用函数eval var personsstr = '[{"Name":"zhangsan","Age ...

  3. javascript转换日期字符串为Date对象

    把一个日期字符串如“2007-2-28 10:18:30”转换为Date对象: 1: var strArray=str.split(" "); var strDate=strArr ...

  4. 3.javascript转换日期字符串为Date对象

    js中文网 阮一峰 1.求format“xxxx年xx月xx日 xx:xx”类型的两个日期天数差 var start = "2017年09月17日 13:51"; var end ...

  5. javascript解析JSON---将字符串转换为json对象

    <script type="text/javascript">       var str = '{"name":"jack", ...

  6. javascript:面向对象和常见内置对象及操作

    本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...

  7. json字符串和Json对象，以及json的基本了解

    考虑到python等语言中没有更好表示json对象的方法,所以使用JavaScript来介绍json 首先是json字符串: var str1 = '{ "name": " ...

  8. java 创建string对象机制 字符串缓冲池 字符串拼接机制

    对于创建String对象的机制,在这一过程中涉及的东西还是值得探究一番的. 首先看通过new String对象和直接赋值的方式有什么区别,看如下代码: public static void main( ...

  9. java 创建string对象机制 字符串缓冲池 字符串拼接机制 字符串中intern()方法

    字符串常量池:字符串常量池在方法区中 为了优化空间,为了减少在JVM中创建的字符串的数量,字符串类维护了一个字符串池,每当代码创建字符串常量时,JVM会首先检查字符串常量池.如果字符串已经存在池中,就 ...

随机推荐

  1. Open War I: 怪物繁殖，行走仿真，瞄准射击...

    See below demo: Share the source codes with your guys. >>>download this "hacking meat& ...

  2. 如何创建一个有System用户权限的命令行

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何创建一个有System用户权限的命令行.

  3. 如何在64位系统上安装SQL Server 2000

    如何在64位系统上安装SQL Server 2000? 现在用SQL Server 2000数据库的人少了吧?大都是SQL Server 2005/2008了.不过还是有需求的,今天一朋友就让我在他的 ...

  4. JavaScript要点 （四）JSON

    JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 . 什么是 JSON? JSON 英文全称 JavaScript Object Notation JSON 是一种轻量级 ...

  5. centos7 挂载ntfs移动硬盘

    第一步:下载安装rpmforge ,下载地址 http://pkgs.repoforge.org/rpmforge-release/  安装 rpm -ivh rpmforge-release-0.5 ...

  6. Android ADB使用之详细篇

    Android开发环境中,ADB是我们进行Android开发经常要用的调试工具,它的使用当然是我们Android开发者必须要掌握的. ADB概述 Android Debug Bridge,Androi ...

  7. Vim文本编辑器 指令簿（二）

    常常处理文本以及常常须要写代码的人,都会有自己比較常常使用的编辑器,本人喜欢用Vim.理由就是Vim编辑器灵活,而且能够达到纯键盘操作,使用纯熟情况下,根本不须要鼠标操作.听起来是不是非常酷的?只是别 ...

  8. [Effective C++ --015]在资源管理类中提供对原始资源的访问

    引言 资源管理类是防止资源泄漏的有力武器,但是许多APIs直接指涉资源,除非你发誓永不使用这样的APIs,否则只得绕过资源管理对象(resource-managing objects)直接访问原始资源 ...

  9. 如何在Linux桌面环境下自动启动程序？

    大多数Linux桌面环境有各自的图形用户界面(GUI),让用户可以配置针对特定用户的自动启动程序或服务.本文将介绍如何在各种Linux桌面环境下,自动启动某个程序的方法. AD:WOT2014:用户标 ...

  10. 启动和启动和停止MySQL服务停止MySQL服务

    1.  启动MySQL服务 启动MySQL服务的命令为: /etc/init.d/mysqld start 命令执行后如图7-5所示,表示启动MySQL服务成功.   (点击查看大图)图7-5  启动 ...