后端学前端之JavaScript及JS小练习(模拟电子表和图片跟随鼠标移动)

其他 2020-01-14 15:47:51 阅读次数: 0
  1. 了解Javascript
    JavaScript, 简称为JS, 是一种运行在浏览器中的脚本语言; 可以被嵌入到HTML中直接使用, 用来使页面动态化. JS起初被设计用于在客户端对用户信息进行校验, netspace, Brendan Eich（布兰登·艾奇）用10天时间设计并开发了JS. ECMA262标准, 规范Javascript的标准. Javascript和JScript(微软)非常像. (js在html中的位置任意)
  2. Javascript的组成（三部分）
    ECMAScript, 简称ES, JS的基本内容, 约束了变量, 语法, 流程控制等基本内容;
    BOM, Browser Object Model, 浏览器对象模型;
    DOM, Document Object Model, 文档对象模型.
    其实BOM包括DOM
  3. ECMAScript
    1)< script>标签的使用和三种输出
    < script>用于定义JS代码块, 可以出现在HTML的任意位置, type属性通常为”text/javascript”, src可以引入外部js文件. 三种输出:
    弹窗输出在这里插入图片描述
//弹窗输出,警告弹窗
    alert("hello world");
    //确认弹窗
    confirm('确认要执行吗?')
    //询问(提示)弹窗
    prompt('请输入所选角色昵称:','如:李白');

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
页面输出

//向页面直接输出信息
    document.write('<h1>你好,世界!</h1>');

在这里插入图片描述
控制台输出

//向控制台输出,通常用于调试代码
    console.log('这是一个控制台输出...');

在这里插入图片描述
在这里插入图片描述
4. JS中的变量和数据类型
JS是一种弱变量类型的语言, 声明变量时要通过var关键字进行. JS中, 变量分为局部变量和全局变量. 定义在函数内的变量就是局部变量, 函数外的变量就是全局变量.
4.1 变量
关键字var修饰变量
注:当未被var修饰的局部变量在经过使用一次后会变成全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo0() {
            c = 123; // 可以省略var, 但是该变量用完后就会变成全局变量
            console.log("c: " + c);
        }

        function demo1() {
            // 局部变量: 函数内定义的变量
            var a;
            a = 123;
            a = "张无忌";
            console.log(a);
            console.log("b=" + b);
        }

        function demo2() {
            console.log("c: " + c);
        }

        // 全局变量
        var b = "你好!";
    </script>
</head>
<body>
    <!--Emmet插件语法, 简化前端代码的开发, IDEA中默认集成-->
    <input type="button" value="demo0" onclick="demo0();">
    <input type="button" value="demo1" onclick="demo1();">
    <input type="button" value="demo2" onclick="demo2();">
</body>
</html>

4.2 数据类型
在这里插入图片描述
4.3JS中的类型自动转换
主要是了解其他类型和boolean类型的相互转换,if语句等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo() {
            var b = false;
            b = ""; // 空字符串-->false, 非空字符串-->true
            b = 0; // 0-->false, 非0-->true
            b = null; // null-->false
            b = undefined; // undefined-->false
            if(b) {
                console.log("ok");
            } else {
                console.log("no");
            }
            console.log(null == undefined); // true
            console.log(null === undefined); // false
        }
    </script>
</head>
<body>
    <button onclick="demo();">demo</button>
</body>
</html>

4.4 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 在js中, 函数也是一个对象
        function demo1(a, b) {
            return a + b;
        }

        var sum = demo1(5, 2);
        console.log("sum: " + sum);

        // 可以变形为:
        var demo2 = function(a, b) {
            return a * b;
        };

        var result = demo2(5, 2);
        console.log("result: " + result);

        // 在js中, 函数也可以作为参数继续传递
        function demo3(a, b, c) {
            console.log(a(b, c));
        }

        demo3(demo2, 10, 2);
    </script>
</head>
<body>

</body>
</html>

4.5 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo1() {
            /**
             * js中数组的特点:
             *  类型不固定
             *  长度不固定
             *  提供了很多方法直接操作数据
             */
            var arr = new Array();
            arr[0] = 123;
            arr[1] = "hello";
            arr[2] = new Date();
            console.log(arr);
        }

        function demo2() {
            var arr = new Array(123, "hi", new Date());
            console.log(arr);
        }

        function demo3() {
            var arr = [456, "你好", new Date()];
            console.log(arr);
            console.log("数组的长度: " + arr.length);
            arr.length = 1;
            console.log(arr);
        }

        function demo4() {
            var arr1 = [123, 456, 789];
            var arr2 = ["abc", "def", "xyz"];
            // concat: 拼接数组
            var arr = arr1.concat(arr2);
            console.log(arr);
            // push: 数组的末尾添加元素
            var n = arr.push("张无忌");
            console.log(arr);
            console.log("数组的新长度: " + n);
            // pop: 取出数组末尾的元素
            var e = arr.pop();
            console.log(e);
            console.log(arr);
            // shift/unshift: 操作数组开头的元素
            // join: 使用指定的连接符拼接数组元素为字符串
            var str = arr.join("-");
            console.log(str);
            // sort: 排序
            var arr2 = [123, 2, 33, 13];
            console.log(arr2);
            arr2.sort(function(a, b) {
                return a - b;
            });
            console.log(arr2);
        }
        demo4();
    </script>
</head>
<body>

</body>
</html>
  1. BOM
    Browser Object Model, 浏览器对象模型. window对象在BOM中处于顶级地位, 通常把window.省略.
    5.1 window下常用的属性
    5.1.1 screen
    代表整个屏幕, 通常用于获取屏幕信息, 例如宽度, 高度
function demo1() {
    var screen = window.screen;
    console.log("宽度: " + screen.width);
    console.log("高度: " + screen.height);
}

5.1.2 location
用于操作浏览器的地址栏, 一般用于进行页面跳转

function demo2() {
    console.log(location.href);
    location.href = "js09-history.html";
    location.href = "https://www.baidu.com";
}

5.1.3 history
用于操作页面访问的历史记录, 可以前进/后退

<script>
    function demo() {
        // history.back(); //后退一个页面
        // history.forward(); // 前进一个页面
        // history.go(); // 正数前进, 负数后退, 0刷新
        history.go(-1);
    }
</script>

5.1.4 navigator
用户获取客户端浏览器信息, 明确客户使用的是哪一款浏览器(内核).

function demo3() {
    console.log(navigator.userAgent);
}
  1. 2window下常用的方法
function demo4() {
    // 定时执行(延时执行)
    window.setTimeout(function() {
        alert("Hello!");
    }, 2000);
}

function demo5() {
    // 间隔执行
    timer = window.setInterval(function() {
        console.log(Math.random());
    }, 2000);
}

function demo6() {
    // 取消间隔执行
    window.clearInterval(timer);
}

-----------------------------分割线-------------------------

  1. 练习1：模拟电子表
    技能：练习间隔执行, 日期处理, DOM操作元素和文本.
    实现思路: 每隔一秒重新获取时间, 并且按照格式将时间重新写入元素即可.
    效果图
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h5 {
            text-align: center;
        }

        #box { /*引入css样式*/
            width: 200px;
            height: 200px;
            background-color: burlywood;
            border-radius: 100px; /*为了能将正方形变成园, 让弧度变成宽度的一半*/
            display: flex;
            align-items: center; /*垂直居中*/
            margin: 0 auto;
            border: 1px solid #666;
        }

        #time { /*设计div中time框的样式*/
            background-color: black;
            width: 80%;
            height: 50px;
            margin: 0 auto; /*水平居中*/
            border-radius: 5px; /*同上*/
            color: chartreuse; /*字体颜色*/
            text-align: center; /*水平居中*/
            line-height: 50px; /*垂直居中*/
            font-weight: bold; /*字体加粗*/
            border: 2px solid #eee;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {/*js的就绪函数,就跟java的main一样*/
            //获取div
            var box = document.getElementById("time");
            //间隔执行
            window.setInterval(function () {
                //获取当前时间
                var date = new Date();
                //获取相应的时间信息
                var time;
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minues = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                //拼接时间
                time = year + "-" + month + "-" + day + " " + hours + ":" + minues + ":" + seconds;
                //赋值
                box.innerText = time;
            }, 1000);
        };
    </script>
</head>
<body>
<h5>贾牌电子表,贾牌中国驰名商标</h5>

<div id="box">
    <div id="time">12:00:00</div>
</div>
</body>
</html>
  1. 练习2：图片跟随鼠标移动
    练习目的：练习事件对象event，操作css样式，鼠标移动时，监听到这个事件，然后让图片移动（定位、top，left，bottom，right）
    效果图：在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {/*js的页面就绪函数,就跟java的main函数一样*/
            //绑定事件(鼠标移动),事件对象event,当事件被触发时,由浏览器创建
            //需要e这个参数来接收事件对象
            window.onmousemove = function (e) {
                // console.log(e);可以打印e对象的信息
                //通过坐标位置来定位图片位置,鼠标的位置通过pageX或者x,所以一般的写法有e.pageX||e.x来达到浏览器兼容的效果
                var img = document.getElementById('img');
                img.style.left = e.pageX + 'px';//修改css的样式,直接.style
                img.style.top = e.pageY + 'px';
            };
        };
    </script>
</head>
<body>
<img id="img" src="images/a.jpeg" alt="" width="200" style="position: absolute;left: -200px;top: 200px">
<!--通过style标签来设定图片的初始位置,position:定位;同时为了方便定位起个id名
   alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本-->
</body>
</html>
吴成伟0122
发布了219 篇原创文章 · 获赞 352 · 访问量 21万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_42859864/article/details/103773210
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022