javascript摘要

javascript 四舍五入

1.toFixed()函数

(1)<html>
<head>
<script type="text/javascript">
var num = new Number(13.67);
document.write(num.toFixed(1)); //保留一位小数,对这个一位小数进行四舍五入
</script>
</head>
</html>

(2)<html>
<head>
<script type="text/javascript">
function displaynum()
{
var num = new Number(13.37);
alert(num.toFixed(1));
}
</script>
</head>
<body>
<form>
<input type="button" value="Show!" οnclick="displaynum()" >
</form>
</body>
</html>

2.  parseFloat() 函数可解析一个字符串,并返回一个浮点数

该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

parseFloat 是全局函数,不属于任何对象。返回值:返回解析后的数字。直到数字的末端,碰见非数字或者空格都会被截止。parseFloat()中F必须是大写

<html>

<body>
<script type="text/javascript">
document.write(parseFloat("10.20") + "<br />") 
document.write(parseFloat("10.00") + "<br />") 
document.write(parseFloat("10.33") + "<br />") 
document.write(parseFloat("  34 45 66 ") + "<br />") 
document.write(parseFloat("   60   ") + "<br />") 
document.write(parseFloat("4012 years") + "<br />")
document.write(parseFloat("He was 40") + "<br />")
document.write(parseFloat("hellow 40") + "<br />")
</script>
</body>
</html>

javascript 对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

活生生的例子:

(1)<!DOCTYPE html>
<html>
<body>
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>  页面输出: Bill is 56 years old.

(2)使用对象构造器

<!DOCTYPE html>
<html>
<body>
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("Bill","Gates",56,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>

javascript 

JavaScript for...in 循环for...in 语句循环遍历对象的属性

<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person)
{
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

 for...in 循环代码解释:

1.这里的for 是变量var person中的每个属性, fname, lname, age.然后给x 
2.这里的person[x] 是, person[fname]=”Bill“ person[lname]="Gates", pesron[age]="56", 即属性->值3.document.getElementById("demo").innerHTML=txt;  是html中的一个id为"demo"的标签, 值为txt;即BillGates56
这个txt=txt + person[x];的意思是, 将前一个值累加起来
第一次循环person[x]为Bill, txt =""   则 txt = "" + "Bill", txt=“Bill"
第二次循环person[x]为Gates, txt="Bill" 则 txt = "Bill"+"Gates"="BillGates"
第三次循环person[x]为56,txt ="BillGates",则txt="BillGates" + "56" = "BillGates56", 循环结束。txt = "BillGates56"

javascript 字符串对象

<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")
document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>
</body>
</html>

javascript match()方法(匹配查询)

<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("worlds") + "<br />")
document.write(str.match("world!"))
</script>
</body>
</html>页面效果:world  null   world!

javascript 日期对象

获取当前的日期

<html>
<body>
<script type="text/javascript">
alert(Date());//注意此处的Date()中D必须是大写,不然无效
</script>
</body>
</html>

javascript  getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

<html>
<body>
<script type="text/javascript">
var d=new Date();
document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");
</script>
</body>
</html>

javascript  setFullYear()设置页面输出的具体时间

<html>
<body>
<script type="text/javascript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
</body>
</html><html>
<body>
</html> 页面输出效果:Tue Nov 03 1992 14:01:05 GMT+0800 (中国标准时间)

javascript 显示一个时钟

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date() // 获取当前的日期
var h=today.getHours() // 获取当前的小时
var m=today.getMinutes()// 获取当前的分钟
var s=today.getSeconds() // 获取当前的 秒
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10) //小于10 
  {i="0" + i}
  return i
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>

javascript 显示周

<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])
</script>
</body>
</html>

javascript 数组array()对象

(1)创建数组

<html>
<body>
<script type="text/javascript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
</script>
</body>
</html>

(2)使用for ……in 循环数组

<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] +"<br/>")
}
</script>
</body>
</html>

(3) javascript 使用concat合并两个数组

<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
</body>
</html>

(4)对数组进行排序

<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>页面上效果:

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

(5)将所有的元素组成一个字符串

<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));    //这是一个字符窜
</script>
</body>
</html>页面显示效果:

George,John,Thomas
George.John.Thomas  

javascript math()(算数对象)

(1)对小数进行四舍五入

<script type="text/javascript">

document.write(Math.round(1.60) + "<br />");

</script>//页面显示为:2

floor() 返回小于或者等于指定表达式的最大整数

以及ceil() 返回大于或者等于指定表达式的最小整数

(2)random()显示0到1 之间的随机数

<html>
<body>
<script type="text/javascript">
document.write(Math.random())
</script>
</body>
</html>

(3)max()取出最大值

<script type="text/javascript">

document.write(Math.max(5,7,10) + "<br />")

</script> 页面显示:10

(4)min()取出最小值

------------------------------------------------------

javascript  pop() 方法用于删除并返回数组的最后一个元素。

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr)
document.write("<br />")
document.write(arr.pop())
document.write("<br />")
document.write(arr)
</script>
页面输出:
George,John,Thomas
Thomas
George,John
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
页面输出:
George,John,Thomas
4
George,John,Thomas,James



1.JavaScript slice() 方法

slice() 方法可从已有的数组中返回选定的元素
arrayObject.slice(start,end)
参数 描述
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)

</script>

输出:

George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin




2.isNaN() 函数用于检查其参数是否是非数字值

isNaN(x)
 
 
x必需。要检测的值

检查数字是否非法:

<script>

document.write(isNaN(123));
document.write(isNaN(-1.23));
document.write(isNaN(5-2));
document.write(isNaN(0));
document.write(isNaN("Hello"));
document.write(isNaN("2005/12/12"));

</script>

输出:

false
false
false
false
true
true

我们在body尾部导入js文件,这样可以加快加载速度

1.分号是 JScript 语句的终止字符

2.用大括号({})括起来的一组 JScript 语句称为一个语句块
3.它不认为语句块是一个新的范围;只有函数创建新范围
4.单行的 JScript 注释以一对正斜杠(//)开始。下面给出一个单行注释的示例。
5.多行注释以一个正斜杠加一个星号的组合(/*)开始,并以其逆向顺序 (*/)结束。
6.JScript 语句中使用等号 (=)给变量赋值:等号是赋值运算符。= 运算符左边的操作项总是
一个 Lvalue。Lvalue 可以是:变量,数组元素,对象元素= 运算符右边的操作项总是一个 
Rvalue。Rvalues 可以是任何类型的一个任意值,包括表达式的值。
例子:an =3;将3赋值给变量an

7. 变量声明:

使用 var 关键字来进行变量声明。

var count;  // 单个声明。
var count, amount, level;  // 用单个 var 关键字声明的多个声明。
var count = 0, amount = 100;  // 一条语句中的变量声明和初始化。
8.变量命名:
JScript 是一种区分大小写的语言

 
 
  • 第一个字符必须是一个 ASCII 字母(大小写均可),或一个下划线(_)。注意第一个字符不能是数字。
  • 后续的字符必须是字母、数字或下划线。
  • 变量名称一定不能是 保留字。 
例子:
有效的:
_pagecount 
Part9 
Number_Items 
无效的:
99Balloons // 不能以数字开头。
Smith&Wesson // “与”符号(&)字符用于变量名称是无效的。

当要声明一个变量并进行初始化,但又不想指定任何特殊值,可以赋值为 JScript 值 null。下面给出示例。

var bestAge = null;
var muchTooOld = 3 * bestAge; // muchTooOld 的值为 0

可以不用 var 关键字声明变量,并赋值。这就是隐式声明。

noStringAtAll = ""; // 隐式声明变量 noStringAtAll

不能使用未经过声明的变量。

强制转换:

var x = 2000;      // 一个数字。
var y = "Hello";   // 一个字符串。
x = x + y;         // 将数字强制转换为字符串。
document.write(x); // 输出 2000Hello
9.JScript 的数据类型

主要(基本)数据类型是:字符串,数值和布尔
复合(引用)数据类型是:对象和数组

特殊数据类型是: null和undefined

JScript包含特殊值数字。它们是:

  • NaN (不是数)。当对不适当的数据进行数学运算时使用,例如字符串或未定义值。
  • 正无穷大。在JScript中如果一个正数太大的话使用它来表示。
  • 负无穷大。在JScript中如果一个负数太大的话使用它来表示。
  • 正0和负0。Jscript区分正0和负0。

Undefined 数据类型

如下情况使返回 undefined 值:

  • 对象属性不存在,
  • 声明了变量但从未赋值。 
null型:

在 Jscript 中数据类型 null 只有一个值:null。关键字 null 不能用作函数或变量的名称。

在 Jscript 中,null 与 0 不相等(与在 C 和 C++ 中不同)。

10,控制程序流程:

Jscript 脚本中的语句一般是按照写的顺序来运行的。这种运行称为顺序运行,是程序流的默认方向。

第一种是选择结构。用来指明两种程序流方向,在程序中创建一个交叉点(像岔路)。在 Jscript 中有四种选择结构可用。 

  • 单一选择结构(if),
  • 二路选择结构(if/else),
  • 内联三元运算符 ?:
  • 多路选择结构(switch)。 
使用循环:

(1)for循环(2)for……in循环(3)while循环

var epsilon = 0.00000000001; // 一些需要测试的极小数字。

// 测试整数的函数。
function integerCheck(a, b, c) 
{
   // 测试。
   if ( (a*a) == ((b*b) + (c*c)) )   
      return true;

   return false;
} // 整数检查函数的结尾。

// 测试浮点数的函数。
function floatCheck(a, b, c)   
{
   // 得到测试数值。
   var delta = ((a*a) - ((b*b) + (c*c)))

   // 测试需要绝对值
   delta = Math.abs(delta);

   // 如果差小于 epsilon,那么它相当接近。
   if (delta < epsilon)   
      return true;

   return false;
} // 浮点检查函数的末尾。


// 三元检查。
function checkTriplet(a, b, c)
{ 
   // 创建临时变量,用于交换值
   var d = 0; 

   // 先将最长的移动到位置“a”。

   // 需要的话交换 a  b
   if (b > a)
   {
      d = a;
      a = b;
      b = d;
   }

   // 需要的话交换 a  c
   if (c > a)
   {
      d = a;
      a = c;
      c = d;
   }

   // 测试全部的 3 个值,看其是否为整数?
   if (((a % 1) == 0) && ((b % 1) == 0) && ((c % 1) == 0))
   { 
      // 如果成立,使用精确检查。
      return integerCheck(a, b, c); 
   }
   else
   {
      // 如果不成立,取尽可能相近的。
      return floatCheck(a, b, c); 
   }
} // 三元检查函数的末尾。

// 下面的三个语句赋给范例值,用于测试。
var sideA = 5;
var sideB = 5;
var sideC = Math.sqrt(50.001);

// 调用函数。调用后,'result' 中包含了结果。
var result = checkTriplet(sideA, sideB, sideC);
11.
 
 
  • JavaScript脚本程序的几种基本格式:
  1. <script>     document.write("Hello World!!!"); </script>
  2. <script language="JavaScript">     document.write("Hello World!!!"); </script>
  3. <script language="JavaScript" type="text/JavaScript">     document.write("Hello World!!!"); </script>
  4. <script language="JavaScript1.2">     document.write("Hello World!!!"); </script>
  5. <script src="hello.js"></script> 注意:document.write("Hello World!!!"); 必须保存为一个外部文件:hello.js
  6. <script language="JavaScript"> <!--     document.write("Hello World!!!"); --> </script>
  7. 使用JavaScript协议: <a href="JavaScript:alert('Hello World!!!')">请单击</a> <a href="#" οnclick="alert('Hello World!!!')">请单击</a> <a href="JavaScript://" οnclick="alert('Hello World!!!')">请单击</a> 
12.语句:

  1. with语句: (对象操作语句)

    • 功能:为一段程序建立默认对象。
    • 格式:
    • var x = 11; 
      var y = 5;
      with (document) {
         write("x = 11, y = 5");
         write("<LI>x + y 是 ", x + y);
         write("<LI>x - y 是 ", x - y);
         write("<LI>x * y 是 ", x * y);
         write("<LI>x / y 是 ", x / y);
         write("<LI>x % y 是 ", x % y);
         write("<LI>++ x 是 ", ++ x);
         write("<LI>-- y 是 ", -- y);
      }


    • with (<对象>){
        <语句组>


    • 例1:
      with (document) {
          write ("限时抢购物品:");
          write ("<Li>ViewSonic 17\" 显示器。");
          write ("<Li>EPSON 打印机。");
      }

    • 例2:
      document.write ("限时抢购物品:");
      document.write ("<Li>ViewSonic 17\" 显示器。");
      document.write ("<Li>EPSON 打印机。");

  2. if...else语句:

    格式1:
    if (<表达式>)
        <语句1>;
    else
        <语句2>;

    if (<表达式>) <语句1>;
    else <语句2>;

    例:
    <Script>
    var now = new Date();
    var hour = now.getHours();

    if (6 < hour && hour < 18)
        document.write ("辛勤工作才能快乐收割!");
    else
        document.write ("休息一下,充电后再出发。");
    </Script>
13.js获取当前的时间:<script language="JavaScript">
//日期 
var now = new Date(); //获取系统日期,
var yy = now.getYear(); //截取年 
var mm = now.getMonth(); //截取月 
var dd = now.getDay(); //截取日 
//取时间 
var hh = now.getHours(); //截取小时 
var mm = now.getMinutes(); //截取分钟 
var ss = now.getTime() % 60000; //获取时间,因为系统中时间是以毫秒计算的, 
所以秒要通过余60000得到。 
ss = (ss - (ss % 1000)) / 1000; //然后,将得到的毫秒数再处理成秒 
var clock = hh+':'; //将得到的各个部分连接成一个日期时间 
if (mm < 10) clock += '0'; //字符串 
clock += mm+':';  
if (ss < 10) clock += '0';  
clock += ss; 
</script>
 
</head> 
<body>
 
<script language="javascript">
var week; 
if(new Date().getDay()==0)          week="周日"
if(new Date().getDay()==1)          week="周一"
if(new Date().getDay()==2)          week="周二"
if(new Date().getDay()==3)          week="周三"
if(new Date().getDay()==4)          week="周四"
if(new Date().getDay()==5)          week="周五"
if(new Date().getDay()==6)          week="周六"
document.write((new Date().getMonth()+1)+"月"+new Date().getDate()+"日 "+week);
</script>
 
</body>
</html>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
   function clock(){
       var nowtime=new Date();
       var flag="AM";
       var hours=nowtime.getHours();
       if(hours>12){
           hours-=12;
           flag="PM";
       }
       hours=hours>9?hours:"0"+hours;
       var minutes=nowtime.getMinutes();
       minutes=minutes>9?minutes:"0"+minutes;
       var seconds=nowtime.getSeconds();
       seconds=seconds>9?seconds:"0"+seconds;
       var disptime=hours+":"+minutes+":"+seconds+" "+flag;
       document.getElementById("clock").innerHTML=disptime;
       setTimeout("clock()",1000);
   }
</script>
</head>
<body>
<div id="clock"></div>
<script type="text/javascript">
clock();
</script>
</body>
</html>

14.switch语句:

<Script> 
function greet(sex) {
switch(sex) { 
    case "帅哥" : alert("帅锅你好啊!");
                  break;
    case "美女" : alert("美女你好啊!");
                  break;
}
}
</Script> 
请输入性别:
<FORM>
<INPUT TYPE="radio" NAME="sex" onClick="greet('帅哥')">
帅哥
<INPUT TYPE="radio" NAME="sex" onClick="greet('美女')">
美女
</FORM>

14. onload() 事件

onload 事件会在页面或图像加载完成后立即发生。

<html>
<head>
<script type="text/javascript">
function load()
{
  alert('调用load');
}
</script>
</head>
<body οnlοad="load()">
</body>
</html>

15. javascript 表单验证

<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>

16. 改变元素的样式

x=document.getElementById("demo") //找到元素   

 x.style.color="#ff0000"

17.




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值