本文精选了前端编程中的实用技巧，包括HTML元素样式切换、数字排序算法、水仙花数判断、冒泡排序实现、素数查找及9*9乘法表生成等。深入探讨了JavaScript对象的创建、属性的添加与读取、属性值的修改与删除，以及对象字面量的使用方法。
1.简单换肤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function a(){
document.getElementById('dl').style.backgroundColor='royalblue';
}
function b(){
document.getElementById('dl').style.backgroundColor='darkseagreen';
}
</script>
</head>
<body>
<dl id="dl">
<form>
<dd>换肤<input type="button" value="换肤一" onclick="a();"/><input type="button" value="换肤二" onclick="b();"/></dd>
<dd>输入姓名：<input type="text"/></dd>
<dd>输入密码：<input type="password"/></dd>
<dd>请您备注：<textarea cols="21" rows="5"></textarea> </dd>
<dd><input type="submit" value="提交"/></dd>
</form>
</dl>
</body>
</html>
2.三个数字排序
function a(){
var n1,n2,n3,t;
n1=+document.getElementById('n1').value;
n2=+document.getElementById('n2').value;
n3=+document.getElementById('n3').value;
if(n1<n2&&n1<n3){
if(n2<n3){
alert(n3+'>'+n2+'>'+n1);
}else{
alert(n2+'>'+n3+'>'+n1);
}
}else if(n2<n1&&n2<n3){
if(n1<n3){
alert(n3+'>'+n1+'>'+n2);
}else{
alert(n1+'>'+n3+'>'+n2);
}
}else if(n3<n1&&n3<n2){
if(n1<n2){
alert(n2+'>'+n1+'>'+n3);
}else{
alert(n1+'>'+n2+'>'+n3);
}
}
}
if(n1<n2){
t=n1;
n1=n2;
n2=t;
}
if(n1<n3){
t=n1;
n1=n3;
n3=t;
}
if(n2<n3){
t=n2;
n2=n3;
n3=t;
}
alert(n1+'>'+n2+'>'+n3);
3.水仙花数
<script>
console.log('start---------------------');
for(var i=100;i<=999;i++){
//方法一 var bai=parseInt(i/100);
// var shi=parseInt((i-bai*100)/10);
// var ge=parseInt(i%10);
var bai=parseInt(i/100);
var shi=parseInt(i/10)%10;
var ge=parseInt(i%10);
if(ge*ge*ge+shi*shi*shi+bai*bai*bai==i){
console.log(i);
}
}
</script>
4.冒泡排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var n=[1,2,3,4,5,6,7,8,9,10],t;
for(var i=0;i<n.length-1;i++){
for(var j=0;j<n.length-1-i;j++){
if(n[j]<n[j+1]){
t=n[j]; n[j]=n[j+1]; n[j+1]=t;
}
}
}
for(var i=0;i<n.length;i++){
document.write(n[i]+' ');
}
</script>
</head>
<body>
</body>
</html>
5.素数1-100
<script type="text/javascript">
for(var i=1;i<=100;i++){
for(var j=2;j<i;j++){
if(i%j==0)break;
}
if(j>=i){
document.writeln(i+'<br>');
}
}
</script>
6. 9*9乘法表
<script type="text/javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+'*'+j+'='+i*j+' ');
}
document.write('<br/>');
}
</script>
结果
-------构造Object类对象
/*
* JS中数据类型
* - String 字符串
* - Number 数值
* - Boolean 布尔值
* - Null 空值
* - Undefined 未定义
* - 以上这五种类型属于基本数据类型，以后我们看到的值
* 只要不是上边的5种，全都是对象
* - Object 对象
* 基本数据类型都是单一的值"hello" 123 true,
* 值和值之间没有任何的联系。
*
* 在JS中来表示一个人的信息（name gender age）：
* var name = "孙悟空";
* var gender = "男";
* var age = 18;
* 如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
*
* 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
* 数组：相同数据类型的有序集合
*
* 对象的分类：
* 1.内建对象
* - 由ES标准中定义的对象，在任何的ES的实现中都可以使用
* - 比如：Math String Number Boolean Function Object....
*
* 2.宿主对象
* - 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
* - 比如 BOM【浏览器对象】 DOM【文档对象】 doument.write() console.log()
*
* 3.自定义对象
* - 由开发人员自己创建的对象
*
*/
//1.创建对象
/*
* 使用new关键字调用的函数，是构造函数constructor 在堆中开辟内存 在栈中放的是堆的地址 通过地址操作堆中的内容值
* 构造函数是专门用来创建对象的函数
* 使用typeof检查一个对象时，会返回object
*/
******* 重点*********
var yy = new Object();
console.log(typeof obj);//object
/*
* 在对象中保存的值称为属性
* 向对象添加属性
* 语法：对象.属性名 = 属性值;
*/
*****赋值同时声明*****
//向obj中添加一个name属性
yy.name="yolanda";
//向obj中添加一个gender属性
yy.gender="女";
//向obj中添加一个age属性
yy.age=17;
/*
* 读取对象中的属性
* 语法：对象.属性名
*
* 如果读取对象中没有的属性，不会报错而是会返回undefined
*/
//console.log(yy.gender);//“女”
//console.log(yy.hello);//undefined
/*
* 修改对象的属性值
* 语法：对象.属性名 = 新值
*/
yy.name = "tom";
console.log(yy.name);
/*
* 删除对象的属性
* 语法：delete 对象.属性名
*/
delete yy.name;
console.log(yy.age);//17
console.log(yy.name);//undefined 被删掉的属性
</script>
<script>
var stu=new Object();
stu.name="liu";
stu.age=20;
console.log(stu.name);
console.log(stu.age);
console.log(typeof stu.age);
</script>
- 特殊的属性名
/*
* 如果要使用特殊的属性名，不能采用.的方式来操作
* 需要使用另一种方式：
* 语法：对象["属性名"] = 属性值
* 读取时也需要采用这种方式
*
* 使用[]这种形式去操作属性，更加的灵活，
* 在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
*
*/
obj["name"] = "刘成林";
console.log(obj["name"]);//"刘成林"
- in运算符
/*
* in 运算符
* - 通过该运算符可以检查一个对象中是否含有指定的属性
* 如果有则返回true，没有则返回false
* - 语法：
* "属性名" in 对象
*/
var stu=new Object();
stu.name="liu";
console.log("name" in stu);//true
- 对象字面量（键值对）
- 使用对象字面量，可以在创建对象时，直接指定对象中的属性
* 语法：{属性名:属性值,属性名:属性值…}
* 对象字面量的属性名可以加引号也可以不加，建议不加,
* 如果要使用一些特殊的名字，则必须加引号
*
* 属性名和属性值是一组一组的名值对结构，
* 名和值之间使用:连接，多个名值对之间使用,隔开
* 如果一个属性之后没有其他的属性了，就不要写,
*/
<script>
var stu={ name:"liu", age:20,birthday:{year:2000,month:05,day:17}};
console.log(stu.name);
console.log(stu.birthday.month);
</script>
- 函数
* 函数 function * - 函数也是一个对象 * - 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码） * - 函数中可以保存一些代码在需要的时候调用 * - 使用typeof检查一个函数对象时，会返回function * //我们在实际开发中很少使用构造函数来创建一个函数对象 //创建一个函数对象 //可以将要封装的代码以字符串的形式传递给构造函数 //var fun = new Function("console.log('Hello 这是我的第一个函数');"); //封装到函数中的代码不会立即执行 //函数中的代码会在函数调用的时候执行 //调用函数 语法：函数对象() //当调用函数时，函数中封装的代码会按照顺序执行 //fun();
* 使用 函数声明 来创建一个函数 * 语法： * function 函数名([形参1,形参2...形参N]){ * 语句... * }
形式一
function f(n){
alert(n);
};
f('liu');
f('cheng');
f('lin');
形式二
var f=function(n){
alert(n);
};
f('liu');
f('cheng');
f('lin');
立即执行函数 （函数代码）（参数）
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
-局部变量与全局变量问题
var a=20;
function f(){
alert(a); //
var a=30; //错误； 函数内部声明变量必须再函数首部最先声明；
}
f();
alert(a);
结果： undefined
20
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
