JS+条件语句+循环语句+js操作

最新推荐文章于 2025-05-19 08:00:00 发布

原创最新推荐文章于 2025-05-19 08:00:00 发布 · 651 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JS

JS 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析JavaScript作为弱类型、脚本及解释性语言的特点，涵盖其简单性、安全性、动态性和跨平台性。详细介绍了JS的组成部分，包括ECMAScript、DOM和BOM，以及如何使用type、src和async标签引入外部JS文件。文章还演示了变量声明、数据类型、运算符、循环结构、条件语句和事件处理等关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS

弱类型语言，脚本语言，解释性语言，基于对象和事件驱动

性质

简单性，安全性，动态性，跨平台性

组成

ECMAScript.
DOM,
BOM

引入外部js

弹框

alert(“”)

写入

document.write(“”)

单行注释

声明变量（见名知意）

var name=" ";

<script type="text/javascript">
    //声明变量(见名知意)
    var name="";
    //给变量赋值  =  将等号右边的值赋给左边
    name="张三";
    //在弹框中如果写的是变量名，那么会将变量的值输出
    alert(name);
    alert("我的名字："+name);
    document.write(name);
    //声明变量的同时直接赋值
    var age= 20;
    alert("今年我长了一岁，我的年龄："+(age+1))
</script>

数据类型

字符串类型	string
数字类型	number
布尔类型	Boolean（true,false）
未定义	undefined

var s1="星期一";
//typeof()
alert(s1);
alert(typeof (s1));//字符串类型 string
alert(typeof (1000.01));//数字类型 number
alert(typeof (true));//Boolean true false
alert(typeof (s));//undefined 未定义

转义字符

\n	换行
\r	回车
\t	空一个table

运算符

Infinity	正无穷
not a number	NaN
%	取余数

一元运算符 ++

a+=b:a=a+b
a/=b: a=a/b

//++:++在前：先增1，在运算；++在后，先运算，再自增1；
var a=10;//a=10
var b=++a;//b=10 a=11
var v=b++;//b=11 c=11

var x=5;
var y=(x++)+10; //x=6 y=15
var z=++y*x++; //y=16 z=96 x=7
alert(z);
alert(y);
alert(x);

比较运算符

==	比较左右两边内容是否相等
===	比较内容和数据类型是否相同

逻辑运算符

 && 	and	（与）
||	or	（或）
！	 not 	（非）

三元运算符

由?:符号表示的，具体的含义其实就和if-else结构的含义差不多，这种运算符会将某个条件作两种处理，如果满足条件的话就执行第一个结果，如果不满足的话就执行另外一个结果

Int A,B,C; 
A=2; 
B=3; 
C=A>B ? 100 :200; 
这条语句的意思是，如果A>B的话，就将100赋给C，否则就将200赋给C；

<< >>

2进制位数移动几位

循环

结构

顺序
分支
循环

条件语句

if

/*
* if(条件表达式){//true/false(比较运算符|逻辑运算符)
*               当条件为true时，所执行的内容
*               }
* */
var age=20;
if (age>18){
    document.write("en ");
}
/*
* if (条件表达式){
*       true
*
* }else{
*       false
*
*       }
* */

if - else if

If -else if
/*
* if(){
*
*  }else if(){
*
*  }else if(){
*
*  }else if(){
*
*  }
* */

switch

/*
        switch (变量){
            case 值1:
                代码块;
                break
            case 值2:
                代码块;
                break
            default :
                代码块；
                break
        }
*/

var sc=window.prompt(); //接受用户输入的内容
var s=isNaN(sc); //判断是不是数字，不是返回的是true

循环语句

while

*
 * 1.起始条件
 * 2.终止条件
 * 3.循环步数
 * while(结束条件){
 *       循环体
 *       循环步数
 *       }
 * */

for

/*
* for循环确定次数
*   for(var 初始值;结束条件;迭代语句){
*   }
*   多层for循环
*   外层for循环执行一次，内层for循环执行全部
*   break
* */

js操作

1.可以通过document.getElementById(“id值”)——————获取指定html元素；

document.getElementById("div1");

<div id="div1"></div>

2.Js事件：onclick（鼠标单击事件）、onmousemove（鼠标移入事件）、onmouseout（鼠标移出事件）；

<div onclick="a()" onmouseout="b()" onmousemove="c()"></div>

3.自定义函数：function 函数名（）{执行的内容}；

<script type="text/javascript">
        function a(){
            
        }
    </script>

4.Js操作HTML：innerHTML=””，添加文本

<script type="text/javascript">
	var div1=document.getElementById("div1");
        div1.innerHTML="hello";
    </script>

<div id="div1"></div>

5.Js操作css.style.属性名=”属性值”

<script type="text/javascript">
	var div1=document.getElementById("div1");
        div1.style.height="100px";
    </script>

<div id="div1"></div>

随滚动条滚动

var leftT;
var leftL;
var rightT;//右侧div距离顶部多少
var rightL;//右侧div距离左边多少
var objleft;//左侧div文档对象
var objright;//右侧div文档对象
//获取文档加载时距离顶部跟左边的属性
function place(){
    objleft=document.getElementById("left");
    objright=document.getElementById("right");
    //左侧div距离顶部多少 
     leftT=document.defaultView.getComputedStyle(objleft,null).top;
    //左侧div距离左边多少   
    leftL=document.defaultView.getComputedStyle(objleft,null).left;   
    rightL=document.defaultView.getComputedStyle(objright,null).left;   
    rightT=document.defaultView.getComputedStyle(objright,null).top;
}
//获取滚动条滚动的像素数
function move(){
    var scrollT=document.documentElement.scrollTop;
    var scrollL=document.documentElement.scrollLeft;
    //设置左侧div距离顶部的像素
    objleft.style.top=parseInt(leftT)+scrollT+"px";
    objleft.style.left=parseInt(leftL)+scrollL+"px";
    objright.style.top=parseInt(rightT)+scrollT+"px";
    objright.style.left=parseInt(rightL)+scrollL+"px";
}
window.onload=place;

获取滚动条滚动的像素数

var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;

延时加载

<script type="text/javascript">
    var now=1;//设置第一张图片
    var max=3;//设置最大的图片
    var i=1;//现在的图片
    function show(){
        for(i=1;i<=max;i++){
            if(now==i){
	document.getElementById("adv"+i).style.display="block";
            }else{
      	document.getElementById("adv"+i).style.display="none";
            }
        }
        if(now==max){
            now=1;
        }else{
            now++;
        }
    }
    //重复加载
    window.setInterval(show,1000);
    //延时加载
    //window.setTimeout(xiaochu,1000);
</script>