js入门学习笔记(更新中)

js的基本方法

//js的基本方法
/*
console.log() 在控制台打印信息
document.write() 在浏览器页面打印输出信息
window.alert() 在浏览器窗口弹出一个提示框，window可省略
window.confirm() 在浏览器弹出一个输入框，window可省略
window.prompt() 弹出一个输入框
*/

js的基本方法

/*
定义变量的关键字var
语法：var 标识符 = 变量值；
变量的标识符命名规则：
1.可以用大小写英文字符，数字，下划线，$组成，数字不能开头
2.变量区分大小写 var x=0;var X=0;
3.不能使用关键字，不能使用保留字
4.建议见名知义，使用驼峰命名法。
5.变量需先定义后使用
*/

js的数据类型

/*
Number 数字类型
String 字符串类型
Boolean 布尔类型 True or False
Undefined 表示“未定义”或不存在
Null 表示空
Object 对象：各种值组成的集合
Symbol 表示独一无二的值
*/

js数据类型的转换

/*
强制类型转换：
转换为Number三种方法：Number() parseInt() parseFloat()
Number()可以转换为boolean类型的值
ParseInt() 取整，能转换123Hello这样的字符串
ParseFloat()能保留小数，可以转换123.999hello这样的字符串

转换为boolean类型 数字0和空字符串转换为false,其他都转换为true
转换为字符串：String() toString() 
*/

js运算符

/*算数运算符: + - * / %(模运算符，取余运算符)，**(指数运算符) ++(自增运算符，加1运算符) 
          --(自减运算符，减1运算符)
逻辑运算符：&&(逻辑与)  ||(逻辑或)  !(逻辑非)
          &&：两个条件同时成立
          ||:两个条件只要成立一个即可
          !:取当前结果的相反值
关系运算符：>  >=  <  <=  ==  !=  === !== 
赋值运算符：=  +=  *=  /=  %=  **=
优先级：算术运算>关系运算>逻辑运算>赋值运算
三元运算符： 条件？表达式1：表达式2
*/

练习

求圆的面积

var txt1 = document.getElementById("txt1");
var txt1 = document.getElementById("txt1");
var btn = document.getElementById("btn");
    btn.onclick = function()
    {
        var r =Number(txt1.value);
        console.log(r);
        // var result = Math.PI*r*r ;
        var result = Math.PI*Math.pow(r,2);//r的平方
        console.log(result);
        result = result.toFixed(2);//保留两位小数
        txt2.value=result;

判断奇偶

var btn=document.getElementById("btn");
 var box=document.getElementById("box");
 btn.onclick=function(){
    var x=parseInt(Math.random()*(50-10+1)+10);//生成10-50之间的随机数
    console.log(x);
    if(x%2 ==0){
        box.innerHTML=x+"是偶数";
        box.style.backgroundColor="red";
    }
    else{
        box.innerHTML=x+"是奇数";
        box.style.backgroundColor="green";
    }
 }

解析三位数

var btn=document.getElementById("btn");
    var txt1=document.getElementById("txt1");
    btn.onclick=function()
    {
        var result =Number(txt1.value);
        var a=parseInt(result / 100);//百位
        var b=parseInt(result % 100 / 10);//十位
        var c=parseInt(result % 10);//个位
        var result="百位为"+ a +"十位为" + b +"个位为" + c;
        console.log(result);
     }

随机生成一个10-100之间的数据，判断这个数是否同时是2,3的整数倍

var x=parseInt(Math.randow()*(100-10+1)+10;
var flag = x%2==0&&x%3==0;
console.log(flag);
if(flag){
console.log(x+"是2和3的倍数");
}
else{
console.log(x+"不同时是2和3的倍数")
}

判断一个数是否是水仙花数

 var box = document.getElementById("box");
    var txt = document.getElementById("txt");
    var btn = document.getElementById("btn");
    btn.onclick=function(){
    var x =Number(txt.value);
    var a=parseInt(x / 100);
    var b=parseInt(x % 100 / 10);
    var c=parseInt(x % 10);
    console.log(x,a,b,c);
    var flag = Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3) === x;
    if(flag)
    {
        // console.log(x+"yes");
        box.innerHTML=x+"是水仙花数";
        box.style.backgroundColor="red";
    }
    else{
        // console.log(x+"no");
        box.innerHTML=x+"不是水仙花数";
        box.style.backgroundColor="green";
    }
    
}

判断闰年

var btn=document.getElementById("btn");
    var box=document.getElementById("box");
    var txt = document.getElementById("txt");
    btn.onclick=function(){
        var x=Number(txt.value);
        if(x%4==0&&x%100!=0)
        {
            box.innerHTML=x+"是闰年";
            box.style.backgroundColor="red";
        }
        else
        {
            box.innerHTML=x+"不是闰年";
            box.style.backgroundColor="green";
     //设置行间样式
    //obj.style.width = "";
    //obj.style.height = "";
    //obj.style.backgroundColor = "";

        }
    }

分支语句

/*if()
    {

    }
    else{

    }
-----------
switch(变量)
    {
        case 值1：
           语句块;
           break;
        case 值2：
           语句块；
           break;
           ......
        default:
            语句块；
    }
*/

成绩判定

var txt = document.getElementById("txt");
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick=function(){
        var num=txt.value;
        console.log(num);
      //法1  
        if(num=="a" || num=="A"){
            box.innerHTML="优秀";
        }
        else if(num=="b" || num=="B"){
            box.innerHTML="良好";
        }
        else if(num=="c"|| num=="C"){
            box.innerHTML="中等";
        }
        else if(num=="d" || num=="D"){
            box.innerHTML="合格";
        }
        else if(num=="e" ||num=="E"){
            box.innerHTML="不合格";
        }
        else{
            box.innerHTML="输入有误"
//法2
    switch(num){
        case "A":
        case "a":
        box.innerHTML="优秀";
        break;
        case "B":
        case "b":
        box.innerHTML="良好";