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. Android 画图类View与SurfaceView之学习

    在开发游戏开发中,android相应的提供了几个重要的模块: 1.显示界面的视图:  Android 提供 View 和 SurfaceView 2.控制游戏整体结构: android 提供 Acti ...

  2. 自定义实现MPVolumeView音量控件

    http://blog.csdn.net/theonezh/article/details/8158420 http://www.cnblogs.com/cate/ios/ http://www.cn ...

  3. js使用技巧大全

    1.防止重新构建 var constructedHtml = ""; for(var i = 0,len = arr.length;i < len;i++){ constru ...

  4. Web- HTML网页颜色大全

    按色相的搭配分类 列举一些最为代表常见的颜色值,让你能快速的找到自己想要的代码 红色 #FFFFCC#CCFFFF#FFCCCC #99CCCC#FFCC99#FFCCCC #FF9999#99669 ...

  5. poj 2251 搜索

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13923   Accepted: 5424 D ...

  6. UIView中触摸事件touchBegin

    UIView触摸事件touchBegin 等一系列方法 1)手指按下 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; ...

  7. DotNet IOC Framework - Microsoft Unity介绍

    一. 新建一个ASP.NET MVC4项目 二. 安装Microsoft Unity 1) 管理Nuget程序包 2)安装Unity3程序包 在你的App_Start文件夹里会多出来两个文件 三. 一 ...

  8. Redis缓存 ava-Jedis操作Redis,基本操作以及 实现对象保存

    源代码下载: http://download.csdn.net/detail/jiangtao_st/7623113 1.Maven配置 <dependency> <groupId& ...

  9. [Practical Git] Switching between current branch and last checkout branch

    When working on a project, it is much easier to work on features and bugs in isolation of the rest o ...

  10. [ES6] ES6 Parameter Object Destructuring with Required Values

    Not only can you provide default values when using ES6 parameter object destructuring, but you can a ...