JavaScript精通实例001

获取系统时间:

   <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>2-2  告诉用户当前时间</title>
<!-- 脚本部分 -->
<script type="text/javascript">
    date_object = new Date();
    what_to_say = date_object.toLocaleString();
    alert(what_to_say);
</script>
</head>
<body style="overflow:auto;">
</body>
</html>

 获取当前时间日期:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>2-3  获取当前时间日期</title>
<!-- 脚本部分 -->
<script type="text/javascript">
    dt = new Date();
    what_to_say = "今天是"+dt.getYear()+"年"+(dt.getMonth()+1)+"月"+dt.getDate()+"日,现在时间是"+dt.getHours()+"点"+dt.getMinutes()+"分"+dt.getSeconds()+"秒";
    alert(what_to_say);
</script>
</head>
<body style="overflow:auto;">
</body>
</html>

 

弹出确认“是/否”的对话框

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>2-4  弹出确认“是/否”的对话框</title>
<!-- 脚本部分 -->
<script type="text/javascript">
    result = confirm("我是提示信息");
    alert("你点击的结果是"+result);
</script>
</head>
<body style="overflow:auto;">
</body>
</html>

 

使用document.write来将内容输出到页面

 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>2-5  使用document.write来将内容输出到页面</title>
<!-- 脚本部分 -->
<script type="text/javascript">
    document.write("你好");
    document.write("<br><b>可以输出HTML</b>");
</script>
</head>
<body style="overflow:auto;">
    <input type="button" value="点我"
        οnclick="document.write('在页面加载完成后再次使用document.write会清空原来的所有内容');" />
</body>
</html>

 

  改进版的“你好”程序

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>2-6  改进版的“你好”程序</title>
</head>
<body style="overflow:auto; padding:0px; margin:0px;">
<div style="font-size:14px; font-weight:bold; color:white; font-family:Arial, 宋体; background-color:#6090DA; padding:4px 10px;">
    你好
    <script>
        if(confirm("需要显示时间吗?")){
            dt = new Date();
            document.write(",当前时间是 ");
            document.write(dt.toLocaleTimeString());
        }
    </script>
</div>
</body>
</html>

  让用户输入两个数字,然后输出相加的结果

 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>3-1  让用户输入两个数字,然后输出相加的结果</title>
</head>
<body style="overflow:auto; padding:0px; margin:0px;">
<div style="font-size:14px; font-weight:bold; color:white; font-family:Arial, 宋体; background-color:#6090DA; padding:4px 10px;">
    <script>
        intA = prompt("请输入第一个数字","");
        intB = prompt("请输入第二个数字",27);
        document.write("你输入的第一个数字是"+intA);
        document.write("<br>你输入的第二个数字是"+intB);
        document.write("<br>两者和是"+(parseInt(intA)+parseInt(intB)));
    </script>
</div>
</body>
</html>

 

让用户输入自己的名字,输出写给用户的情书

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>3-5  让用户输入自己的名字,输出写给用户的情书</title>
</head>
<body style="overflow:auto; padding:0px; margin:0px;">
<div style="font-size:14px; font-weight:bold; color:white; font-family:Arial, 宋体; background-color:#6090DA; padding:4px 10px; text-indent:28px;">
<script>
    var user_name, from_name, to_name;        //声明变量
    var str_prompt="请输入你自己的名字和对方的名字,两个名字间用空格分开"; //将输入提示保存在变量中
    var str_prompt_default="自己的名字 对方的名字";      //将默认值保存在变量中
    user_name=prompt(str_prompt, str_prompt_default);      //获取用户名
    user_name=user_name?user_name:"小强 美眉";      //用户取消时的默认值
    from_name=user_name.split(" ")[0];         //分析写信者的名字
    to_name=user_name.split(" ")[1];         //分析收信者的名字
    document.write(("<p>亲爱的"+to_name+"</p>").fontsize(3));    //开始写信
    /*信件正文,替换掉文中的名称*/
    document.write("<p>想到你那洒脱的笑容与动人的曲线,我禁不住提起笔,我选择这种原始的方式来表达我对你的爱,希望你能接受。</p>".replace(/你/g,to_name+"你").replace(/我/g,from_name+"我"));
    document.write("<p>你在我心中的分量日益增加。你的眼,你的脸,你的笑容,悄悄地偷走了我的心,在我闲暇时总有那种幻想的美...</p>".replace(/你/g,to_name+"你").replace(/我/g,from_name+"我"));
    /*信件结尾的签名*/
    document.write(("<p>爱你的"+from_name+"</p>").fontsize(2).fontcolor("gold").link("mailto:xiaoqiang@163.com"));
</script>
</div>
</body>
</html>

JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及以上版本 2.本书所附光盘范例 第1章(\1) 示例描述:变量。 1_1.htm 变量声明。 1_2.htm 局部变量和全局变量。 1_3.htm JavaScript中的强制类型转换。 1_4.htm 在HTML中为JavaScript传递变量。 1_5.htm 在HTML中引用JavaScript的变量。 1_6.htm 比较undefined和"undefined"。 第2章(\2) 示例描述:客户端的流程控制。 2_1.htm 条件判断语句if…else 2_2.htm 多条件判断语句switch。 2_3.htm 嵌套循环语句for。 2_4.htm 循环语句while。 2_5.htm 控制循环过程break和continue。 2_6.htm 利用流程控制语句实现冒泡排序。 第3章(\3) 示例描述:字符串操作。 3_1.htm 连接字符串。 3_2.htm 在字符串中查找指定字符。 3_3.htm 提取字符串中的字串。 3_4.htm 替换字符串中的指定字符。 3_5.htm 将字符串分解为数组。 3_6.htm 字符串大小写的书写和判断。 第4章(\4) 示例描述:数组技术。 4_1.htm 创建空数组。 4_2.htm 创建带初始值的数组。 4_3.htm 将数组转换为字符串。 4_4.htm 遍历数组中的元素。 4_5.htm 合并两个数组。 4_6.htm 创建多维数组。 4_7.htm 数组排序。 第5章(\5) 示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示日期。 5_6.htm 标题栏显示时间。 5_7.htm 不同时间的不同问候。 第6章(\6) 示例描述:JavaScript页面处理技巧。 6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面中的tooltip提示。 6_6.htm 在Web页面中控制其元素的选择状态。 第7章(\7) 示例描述:JavaScript的鼠标事件和键盘事件。 7_1.htm 按钮的鼠标单击事件。 7_2.htm 用鼠标点亮文本。 7_3.htm 渐显图片。 7_4.htm 跟随鼠标的图片。 7_5.htm 跟随鼠标的*。 7_6.htm 跟随鼠标的文字。 7_7.htm 判断Ctrl键是否被按下。 7_8.htm 设置页面中某按钮的热键。 第8章(\8) 示例描述:窗口大小自动化管理。 8_1.htm 按指定要求打开的窗口。 8_2.htm 控制窗口的打开和关闭。 8_3.htm 从天而降的窗口。 8_4.htm 打开慢慢变大的窗口。 8_5.htm 打开一个四面变大的窗口。 8_6.htm 页面左右分开。 8_7.htm 定时打开网页。 8_8.htm 自动打开新的窗口。 第9章(\9) 示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 9_6.htm 打字效果的文字特效。 9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章(\10) 示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 10_4.htm 滚动链接。 10_5.htm 不断闪动的链接。 10_6.htm 在按钮上显示不同的链接。 10_7.htm 带链接的滚动字幕。 第11章(\11) 示例描述:在HTML中用JavaScript控制图像页面。 11_1.htm 不停闪烁的图片。 11_2.htm 图片展示选项。 11_3.htm 图片的渐显播放。 11_4.htm 将图片固定在页面左上角。 11_5.htm 左右移动的图片。 11_6.htm 图像滚动公告版。 11_7.htm 跟随屏幕移动的图像。 第12章(\12) 示例描述:菜单特效。 12_1.htm 左键弹出式菜单 12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景颜色自己选。 第14章(\14) 示例描述:页面特效。 14_1.htm 页面全屏显示。 14_2.htm 显示器检测代码(给出提示)。 14_3.htm 浏览器检测后自动跳转相应界面。 14_4.htm 检测浏览器相应版本。 14_5.htm 页面停留时间1。 14_6.htm 页面停留时间2。 14_7.htm 检测浏览器类型并调用不同的背景音乐。 14_8.htm 将站点加入频道栏。 14_9.htm 将站点加入收藏夹。 14_10.htm 禁止察看源代码。 14_11.htm 自动弹出式窗口。 14_12.htm 自动滚屏。 第15章(\15) 示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4.htm 锁定表格的表头。 15_5.htm 简单的表格排序。 15_6.htm 表格翻页。 第16章(\16) 示例描述:AJAX应用特效。 16_1.htm 无刷新实现图片切换。 16_2.htm 很酷的导航特效。 16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm 通过XML HTTP做一个特殊HEAD的请求。 16_7.htm 显示XML数据表格。 16_8.htm 服务器端的动态建议。 第17章(\17) 示例描述:Prototype基础应用。 17_1.htm 使用$()得到html元素。 17_2.htm 使用$F()返回表单输入控件的值。 17_3.htm 使用$A()将单个的参数转换成Array对象。 17_4.htm 使用$H()把一些对象转换成Hash对象。 17_5.htm 使用$R()创建新的对象域。 17_6.htm 使用Ajax.Request类进行异步调用。 17_7.htm 使用Ajax.Updater类填充html。 第18章(\18) 示例描述:jQuery应用特效。 18_1.htm 动态表格和动态表单。 18_2.htm 输入框获得焦点、点击、划过时全选。 18_3.htm CSS 样式表动态选择。 18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个新窗口。 18_6.htm 键盘控制选择表格并编辑。 18_7.htm 下拉框的值同时给文本框和文本域。 18_8.htm 基于jQuery的折叠菜单。 18_9.htm 可编辑的表格数据。 第19章(\19) 示例描述:其他特效。 19_1.htm 中文日期。 19_2.htm 现在的日期及星期。 19_3.htm 带链接的滚动字幕。 19_4.htm 垂直滚动公告板。 19_5.htm 关闭窗体。 19_6.htm 分时问候。 19_7.htm 密码保护页面。 19_8.htm 当前的时间。 第20章(\20) 示例描述:正则表达式。 20_1.htm 校验是否全由数字组成。 20_2.htm 校验登录名。 20_3.htm 校验用户姓名。 20_4.htm 校验普通电话、传真号码。 20_5.htm 校验中文字符。 20_6.htm 校验邮件地址的有效性。 20_7.htm 校验腾讯QQ号。
第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\Inetpub\wwwroot下; 2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2.htm <script>与<noscript> • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 • 2.5.htm 引号的转义使用 • 2.6.htm Bolean值的使用 • 2.7.htm undefinded和null的使用 • 2.8.htm 变量的优先级 • 2.9.htm 数值型数据 • 2.10.htm 数组数据类型 • 2.11.htm 字符串型转换为逻辑型数据 • 2.12.htm toLowerCase()方法 • 2.13.htm 通过字符串调用toLowerCase()方法 • 2.14.htm 使用值的数据操作 • 2.15.htm 对数据的引用执行 • 2.16.htm 字符串的比较 第3章(\第3章) • 3.1.htm 表达式示例 • 3.2.htm 加号运算符应用 • 3.3.htm 数值型数据与字符串连接 • 3.4.htm 数值型数据与字符串连接 • 3.5.htm 减号的取反功能 • 3.6.htm 对变量赋常量值 • 3.7.htm 对变量赋常量值 • 3.8.htm “==”与“=”的区别 • 3.9.htm 比较运算符的区别 • 3.10.htm “++”运算符后置应用 • 3.11.htm “++”运算符前置应用 • 3.12.htm 逗号表达式的连接应用 • 3.13.htm 逗号表达式的连接应用 • 3.14.htm typeof运算符的使用 • 3.15.htm new运算符的应用 • 3.16.htm delete运算符的应用 • 3.17.htm 用()改变运算优先级 • 3.18.htm 运算符结合性 第4章(\第4章) • 4.1.htm 条件语句内单行代码的写法 • 4.2.htm 变量赋初值 • 4.3.htm if…else举例 • 4.4.htm 用else进行更多选择 • 4.5.htm if语句的嵌套之一 • 4.6.htm if语句的嵌套之二 • 4.7.htm switch语句 • 4.8.htm while循环语句 • 4.9.htm do-while循环语句 • 4.10.htm for循环语句 • 4.11.htm for循环语句之二 • 4.12.htm continue语句 第5章(\第5章) • 5.1.htm 函数定义 • 5.2.htm 无返回值的函数 • 5.3.htm 有返回值的函数及其调用 • 5.4.htm 直接使用函数返回值 • 5.5.htm 直接使用函数返回值 • 5.6.htm 直接使用函数返回值 • 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法 • 5.13.htm isNaN方法 • 5.14.htm escape方法 • 5.15.htm unescape方法 第6章(\第6章) • 6.1.htm 对象创建与属性调用 • 6.4.htm this关键字的使用 • 6.5.htm 数组的length属性 • 6.6.htm 数组元素遍历 • 6.7.htm 数组元素遍历 • 6.8.htm 数组元素遍历之二 • 6.9.htm 用构造函数来创建数组 • 6.10.htm 用构造函数来创建数组之二 • 6.11.htm join方法 • 6.12.htm revrse方法 • 6.13.htm sort方法 • 6.14.htm alice方法 • 6.15.htm splice方法 • 6.16.htm Object对象 • 6.17.htm anchor方法 • 6.18.htm big方法 • 6.19.htm fontcolor方法 • 6.20.htm 字符串搜索 • 6.21.htm link方法 • 6.22.htm 字符串转换与匹配 • 6.23.htm Date对象的方法 • 6.24.htm toString方法 • 6.25.htm with语句 • 6.26.htm for…in语句调用对象属性 • 6.25.htm for…in语句调用属性值
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Arisono

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值