js-语言基础进阶-变换按钮的实现

最新推荐文章于 2024-05-15 20:43:52 发布

芝士小熊饼干

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量97

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_74711824/article/details/131117030

版权

🐻作者：芝士小熊饼干
📖 系列专栏：数据结构-蓝桥杯-算法⭐

💪坚持天数：16天🤖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的三种引入方式</title>

    <!-- 第二种 内嵌式  -->
    <script>

        alert('内嵌式js代码...test')
    </script>
    <!-- 第三种，外联式 -->
    <script src="js/main.js"></script>
    <script>
        //在这里开始写js代码在加载页面代码时，js代码直接执行

        //定义变量
        // var iNumbver=1;
        // alert(iNumbver)
        // alert(typeof(iNumbver))
        //浮点行 number
        var fPi=3.14;
        //通过页面的控制台来显示结构
        //console.log()
        console.log(fPi,typeof(fpi));
        // alert(console.log(fPi,typeof(fpi)))

        //字符串类型 string
        var sName='tom';
        console.log(sName,typeof(sName));

        //布尔类型 boolean
        var bIsOK =true;
        console.log(bIsOK,typeof(bIsOK));

        // 未定义类型 undefined
        var uDate;
        console.log(uDate,typeof(uDate));
        
        //空类型 null object
        var nDate =null;
        console.log(nDate,typeof(nDate));

        //自定义对象的 object 类型
        var oCat={
            //对象的属性 属性名：属性值，
            name:'tome',
            age:12,
            gender:'男'

        };
        //输出对象类型
        console.log(oCat,typeof(oCat));
        //使用对象的属性值
        console.log(oCat.name,oCat.age,oCat.gender);
        // --------------------------------------------------------------------------------------------//
/***********************************************************************************************/bIsOK

        // 定义一个无参返回值的函数
        function fnShow1(){
            alert('无参数返回值的参数')

        };
        // 调用函数
        fnShow1();

        // 有参数但无返回值函数
        function fnShow2(sMsg){
            alert('有参数无返回值'+sMsg)
        };
        fnShow2(' JavaScript');

        //无参有返回值的函数
        function fnShow3(){
            alert('无参数返回值的参数')

             return'fnShow3'
        };
        // 调用函数
        var sRet=fnShow3();  

        // 有参数有返回值函数
        function fnShow4(sMsg){
            alert('有参数有返回值'+sMsg)
            return '有参数有返回值 '+sMsg
        };
        
        var sRet=fnShow4(' test');

    
    

    </script>



</head>
<body>
    <!-- 第一种js，行内式， -->
    <input type="button" value="ok" onclick="alert('ok被点击');">
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量作用域</title>


    <script>
        //定义一个变量（全局变量）
        var iNumber =0;
        //定义一个函数
        function fnShow(){
            //直接使用全局变量
            console.log(iNumber);
            

            //修改全局变量
            iNumber+=10;
            console.log(iNumber);
            iNumber++;
            console.log(iNumber);
            var sMsg='Hello';
        }

        //调用函数
        fnShow();
        /**************************************************/
        //条件判断
        //关系运算符==和===

        // ==判断时，将字符串转换成数字在进行比较
        if( 5=='5'){
            alert('相等');
        }

        // if 
        // ===值与类型都比较
        if(5==='5'){
            alert('相等')
        }
        else{
            alert('不相等')
        }
        /************************************/
        // 逻辑运算符
        // && || ！
        //****************************************************************//

        //循环操作
        //for循环格式：
        /*for(表达式1；表达式二；表达式三；){
            循环体

        }*/
        function test(){
            var sum=0;
            for(var i=1;i<=100;i++){
            sum+=i;}
            alert(sum);
        }
        // 与c语言类似 do-while  ，while
        //
        //数组
        var list1=new Array(1,2,3,4,'a','b');
        var list2=[1,2,3,4,5,6];
        //获取长度
        console.log(list2.length);
        //数组的增删
        list2.pust('C');
        list2.pop();

        //
        list2.splice(3,3);
        //
        list2.splice(3,0,33);
        //插入多个数据
        list2.splice(3,0,33,4,433,444);

        //替换
        //替换时 参数二
        list2.splice(3,1,3333333333333);
        //替换多个
        list2.splice(3,1,22222222222,333333333,4444444444,5555555);
        ///
        var a='1';
        var b='2';
        ret=parseInt(a)+parseInt(b);
        console.log(ret,typeof(ret));
        // 将字符串转换成数字
        // parseFloat 浮点型

        /
        // 获取 html标签

        //通过window对象一个onload事件来获取标签
        window.onload=function(){
            var o=document.getElementById('d1');
            alert(o);
            alert(o.innerText)// 获取标签内的文本值

        }

        // 通过 docment 里面的getElementById（参数标签id值）来获取标签
        /

        //获取和设置标签属性
        //设置事件
        window.onload=function(){

            var i =document.getElementById('in1');
            alert(i);
            var oa=document.getAnimations('oa');
            alert(oa);

            //获取属性值
            console.log(i.type);
            console.loh(i.name);

            //设置属性值
            i.className='min';
            oa.style.color='red';
            oa.style.fontSize='50px';


        }

        //innerHTML
        var oDiv=document.getElementById('md');
        alert(oDiv);
        alert(odiv.innerHTML);

        //设置区别
        oDiv.innerText='BBBB';
        oDiv.innerHTML='CCCC'

        oDiv.innerHTML='<a href="http://www.baidu.com" >谷歌</a>';
        oDiv.innerText='<a href="http://www.baidu.com" >谷歌</a>';



       


    </script>
</head>
<body>
    <div id="d1">

        AAAAAA
    </div>
    <hr>
    <input type="text" class='myin'id='in1' name="username" value="xxxx">
    <a href="http://www.baidu.com" id="oa">百度</a>
    <hr>
    <div class="" id="md">AAAA</div>
</body>
</html>

变换颜色按钮⭐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    

    <!-- 设置一些样式风格 -->
    <style>
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            width: 200px;
            height: 100px;
            background: blue;

        }
        .class3{
            width: 300px;
            height: 100px;
            background: saddlebrown;
        }
    </style>
    <script>

        //定义一个函数，用来完成更换
        function changeStyle(){
            //得到标签，改变标签的类名属性
            var oDiv=document.getElementById('md');

            //使用一个随机数
            var index=Math.round(Math.random()*2 );//得到0—2的随机数
            alert(index)
            if (index==0)
            {
                oDiv.className='class1';
            }
            else if (index==1)
            {
                oDiv.className='class2';
            }
            else
            {
                oDiv.className='class3';
            }
        }
    </script>




</head>
<body>
    <!-- 通过按钮来控制一个标签改变样式 -->
    <div class="class1" id="md">AAAAAAAAAAA</div>
    <hr>

    <input type="button" value="换一换" onclick="changeStyle()">
    
</body>
</html>