L-FHy

JavaScript基础03 - DOM编程

JavaScript基础03

001-DOM编程- 获取文本框的value
002-DOM编程-innerHTML和innerText操作div和span
003-DOM编程-关于正则表达式
004-DOM编程-去除字符串前后的空白
005-DOM编程-表单验证
006-DOM编程-复选框的全选和取消全选
007-DOM编程-
008-DOM编程-显示网页时钟
009-DOM编程-内置支持类Array

001-DOM编程- 获取文本框的value

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM编程- 获取文本框的valuetitle>
    head>
    <body>
        <script type="text/javascript">
            /*
                1、JavaScript包括三大块：
                    ECMAScript：JS的核心语法（ES规范/ECMA-262标准）
                    DOM：Document Object Model（文档对象模型：对网页上的节点进行增删改的过程。）HTML文档被当做一颗DOM树来看待。
                         var domObj = document.getElementById("id");
                    BOM: Browser Object Model（浏览器对象模型）
                         关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
                2、DOM和BOM的区别和联系？
                    BOM的顶级对象是：window
                    DOM的顶级对象是：document
                    实际上BOM包括DOM！
             */
            /*window.onload = function () {
                //var btnElt = window.document.getElementById("btn");
                var btnElt = document.getElementById("btn");
                alert(btnElt); // [object HTMLInputElement]
            }*/
            window.onload = function () {

                var btnElt = document.getElementById("btn");
                btnElt.onclick = function () {

                    /*
                    // 获取username节点
                    var usernameElt = document.getElementById("username");
                    alert(username.value);
                    */

                    //alert(document.getElementById("username").value);

                    // 可以修改它的value
                    document.getElementById("username").value = "zhangsan";
                }


            }
        script>

        
        <input type="text" id="username"/>
        <input type="button" id="btn" value="获取文本框的value"/>

        <hr>

        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("setbtn").onclick = function () {
                    document.getElementById("username2").value = document.getElementById("username1").value
                }
            }
        script>

        <input type="text" id="username1"/>
        <br>
        <input type="text" id="username2"/>
        <br>
        <input type="button" id="setbtn" value="将第一个文本框中的内容赋值给第二个文本框"/>

        <br>
        
        <input type="text" onblur="alert(this.value)"/>

    body>
html>

002-DOM编程-innerHTML和innerText操作div和span

DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="UTF-8">
        <title>DOM编程-innerHTML和innerText操作div和spantitle>

        <style type="text/css">
            #div1{
                background-color: aquamarine;
                width: 300px;
                height: 300px;
                border: 1px black solid;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        style>

    head>
    <body>
        
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("btn").onclick = function () {
                    // 设置div中的内容
                    // 第一步：获取div对象
                    var divElt = document.getElementById("div1");
                    // 第二步：使用innerHTML属性来设置元素内部的内容
                    //divElt.innerHTML = "Hello World!";
                    //divElt.innerHTML = "用户名不能为空！";
                    divElt.innerText = "用户名不能为空！";
                }
            }
        script>

        <input type="button" value="设置div中的内容" id="btn"/>

        <div id="div1">div>

    body>
html>

003-DOM编程-关于正则表达式

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM编程-关于正则表达式title>
    head>
    <body>
        <script type="text/javascript">
            /*
                1、什么是正则表达式？有什么用？
                    正则表达式：Regular Expression
                    正则表达式主要用在字符串格式匹配上面。

                2、正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持,javascript中也支持。
                大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号。目前使用最多
                的是计算机编程领域。用作字符串格式匹配，包括搜索方面。

                3、正则表达式，对于我们javascript编程来说，掌握哪些内容呢？
                    第一，常见的正则表达式符号要认识。
                    第二，简单的正则表达式要会写。
                    第三，他人编写的正则表达式要能看懂。
                    第四，在javascript当中，怎么创建正则表达式对象！（new对象）
                    第五，在javascript当中，正则表达式对象有哪些方法！（调方法）
                    第六，要能够快速的从网络上找到自己需要的正则表达式，并且测试其有效性。

                4、常见的正则表达式符号？
                    .匹配除换行符以外的任意字符
                    \w匹配字母或者数字或者下划线或汉字
                    \s匹配任意的空白符
                    \d匹配数字
                    \b匹配单词的开始或结束
                    ^匹配字符串的开始
                    $匹配字符串的结束

                    *重复零次或者更多次
                    +重复一次或者更多次
                    ?重复零次或者一次
                    {n}重复n次
                    {n,}重复n次或者更多次
                    {n,m}重复n到m次

                    \W匹配任意不是字母，数字，下划线，汉字的字符
                    \S匹配任意不是空白符的字符
                    \D匹配任意非数字的字符
                    \B匹配不是单词开头或结束的位置
                    [^x]匹配除了x以外的任意字符
                    [^aeiou]匹配除了aeiou这几个字母以外的任意字符

                    正则表达式当中的小括号()优先级较高。
                    [1-9]表示1到9的任意1个数字（次数是1次。）
                    [A-Za-z0-9]表示A-Za-z0-9中的任意1个字符
                    [A-Za-z0-9-]表示A-Z、a-z、0-9、-，以上所有字符中的任意1个字符。

                    |表示或者
                    [abc]表示匹配字符 a、b 或 c 中的任意一个

                5、简单的正则表达式要会写
                    QQ号的正则表达式:^[1-9][0-9]{4,}$

                6、他人编写的正则表达式要能看懂？
                    email正则，^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

                7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法？
                    第一种创建方式：
                        var regExp = /正则表达式/flags;
                    第二种创建方式：
                        var regExp = new RegExp("正则表达式","flags");

                    关于flags:
                        g : 全局匹配
                        i : 忽略大小写
                        m : 多行搜索（ES规范指定之后才支持m）
                            当前面是正则表达式的时候，m不能用。
                            只有前面是普通字符串的时候，m才能用。

                    正则表达式对象的test()方法？
                        true/false = 正则表达式对象.test(用户填写的字符串);
                        true : 字符串格式匹配成功
                        false : 字符串格式匹配失败



             */
            window.onload = function () {
                // 给按钮绑定click
                document.getElementById("btn").onclick = function () {
                    var email = document.getElementById("email").value;
                    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    var ok = emailRegExp.test(email);
                    if(ok){
                        document.getElementById("emailError").innerText = "邮箱地址合法";
                    }else{
                        document.getElementById("emailError").innerText = "邮箱地址不合法";
                    }
                }
                //给文本框绑定focus
                document.getElementById("email").onfocus = function () {
                    document.getElementById("emailError").innerText = "";
                }
            }
        script>

        <input type="text" id="email"/>
        <span id="emailError" style="color: red;font-size: 12px;">span>
        <br>
        <input type="button" value="验证邮箱" id="btn"/>


    body>
html>

004-DOM编程-去除字符串前后的空白

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM编程-去除字符串前后的空白title>
    head>
    <body>
        <script type="text/javascript">
            // 低版本的IE浏览器不支持字符串的trim()函数，怎么办？
            // 可以自己对String类扩展一个全新的trim()函数
            String.prototype.trim = function () {
                //alert("扩展之后的trim方法");
                //去除当前字符串的前后空白
                //在当前的方法中的this代表的就是当前字符串
                return this.replace(/^\s+/,"").replace(/\s+$/,"");
            }

            window.onload = function () {
                document.getElementById("btn").onclick = function () {
                    // 获取用户名
                    var username = document.getElementById("username").value;
                    // 去除前后空白
                    username = username.trim();
                    // 测试
                    alert("--->" + username + "<---");
                }
            }

        script>

        <input type="text" id="username"/>
        <input type="button" value="获取用户名" id="btn"/>
    body>
html>

005-DOM编程-表单验证

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单验证title>
        <style type="text/css">
            span{
                    color:red;
                    font-size: 12px;
                }
        style>
    head>
    <body>

        <script type="text/javascript">

            /*

                表单验证;
                (1)用户名不能为空。
                (2)用户名必须在6-14位之间。
                (3)用户名只能由数字和字母组成，不能含有其它符号(正则表达式)。
                (4)密码和确认密码一致，邮箱地址合法。
                (5)统一失去焦点验证。
                (6)错误提示信息统一在span标签中提示，并且要求字体12号，红色。
                (7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value。
                (8)最终表单中所有项均合法方可提交。

             */
            window.onload = function () {
                //给用户名文本框绑定blur事件（失去焦点事件）

                //获取username的span标签
                var usernameError = document.getElementById("usernameError");

                var usernameElt = document.getElementById("username");
                usernameElt.onblur = function () {
                    // 获取用户名
                    var username = document.getElementById("username").value;
                    // 去除前后空白
                    username = username.trim();
                    // 判断用户名是否为空
                    /*if(Boolean(username)){
                        // 代表username非空
                        alert("username=" + username);
                    }else{
                        // 代表username为空
                        alert("username为空字符串");
                    }*/
                    //if(username.length == 0){}

                    if(username === ""){
                        // 用户名为空
                        usernameError.innerText = "用户名不能为空！";
                    }else{
                        // 用户名不为空
                        // 继续判断长度
                        if(username.length < 6 || username.length > 14){
                            usernameError.innerText = "用户名长度必须在[6-14]之间";
                        }else{
                            // 用户名长度合法
                            // 继续判断是否含有特殊符号
                            var regExp = /^[A-Za-z0-9]+$/;
                            var ok = regExp.test(username);
                            if(ok){
                                // 用户名最终合法
                            }else{
                                // 用户名中含有特殊字符
                                usernameError.innerText = "用户名只能由数字和字母组成";
                            }
                        }
                    }
                }
                // 给username这个文本框绑定获得焦点事件
                usernameElt.onfocus = function () {

                    // 清空非法value
                    if(usernameError.innerText != ""){
                        username.value = "";
                    }

                    // 清空span
                    usernameError.innerText = "";
                }

                // 获取确认密码的提示标签
                var pwdError= document.getElementById("pwdError");
                // 获取确认密码框对象
                var userpwd2Elt = document.getElementById("userpwd2");
                // 绑定blur事件（失去焦点事件）
                userpwd2Elt.onblur = function () {
                    // 获取密码和确认密码
                    var userpwdElt = document.getElementById("userpwd");
                    var userpwd = userpwdElt.value;
                    var userpwd2 = userpwd2Elt.value;
                    if(userpwd != userpwd2){
                        // 密码不一致
                        pwdError.innerText = "前后密码不一致";
                    }else{
                        // 密码一致

                    }
                }

                // 给确认密码的这个文本框绑定获得焦点事件
                userpwd2Elt.onfocus = function () {
                    if(pwdError.innerText != ""){
                        userpwd2Elt.value = "";
                    }
                    pwdError.innerText = "";
                }

                // 获取email的span
                var emailError = document.getElementById("emailError");
                // 给email绑定blur事件
                var emailElt = document.getElementById("email");

                emailElt.onblur = function () {
                    // 获取email
                    var email = emailElt.value;
                    // 编写email的正则
                    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    var ok = emailRegExp.test(email);
                    if(ok){
                        // 邮箱合法
                    }else{
                        // 邮箱不合法
                        emailError.innerText = "邮箱地址不合法";
                    }
                }

                // 给email绑定focus事件
                emailElt.onfocus = function () {
                    if(emailError.innerText != ""){
                        emailElt.value = "";
                    }
                    emailError.innerText = "";
                }

                // 给提交按钮绑定鼠标单击事件
                var submitBtnElt = document.getElementById("submitBtn");
                submitBtnElt.onclick = function () {
                    // 触发username的blur/userpwd2的blur/email的blur
                    // 不需要人工操作，使用纯JS代码触发事件。
                    usernameElt.focus();
                    usernameElt.blur();

                    userpwd2Elt.focus();
                    userpwd2Elt.blur();

                    emailElt.focus();
                    emailElt.blur();

                    // 当所有表单项都是合法的时候，提交表单
                    if(usernameError.innerText == "" && pwdError.innerText == "" && emailError.innerText == ""){
                        // 获取表单对象
                        var userFormElt = document.getElementById("userForm");
                        // 可以在这里设置action
                        userFormElt.action = "http://localhost:8080/jd/save";
                        // 提交表单
                        userFormElt.submit();
                    }
                }

            }


        script>
        
        
        <form id="userForm" method="get">
            用户名<input type="text" name="username" id="username"/>
            <span id="usernameError">span>
            <br>
            密码<input type="text" name="userpwd" id="userpwd"/>
            <br>
            确认密码<input type="text" id="userpwd2"/>
            <span id="pwdError">span>
            <br>
            邮箱<input type="text" name="email" id="email"/>
            <span id="emailError">span>
            <br>
            
            <input type="button" value="注册" id="submitBtn"/>
            <input type="reset" value="重置"/>
        form>
    body>
html>

006-DOM编程-复选框的全选和取消全选

DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>复选框的全选和取消全选title>
    head>

    <body>
        <script type="text/javascript">
            /*window.onload = function () {
                var firstChkElt = document.getElementById("firstChk");
                firstChkElt.onclick = function () {
                    // 先获取第一个复选框的选中状态（复选框对象是checkbox对象）
                    // alert(firstChkElt.checked);
                    // 根据name获取所有元素
                    var aihaos = document.getElementsByName("aihao");
                    if(firstChkElt.checked){
                        // 全选
                        for(var i = 0; i < aihaos.length; i ++){
                            aihaos[i].checked = true;
                        }
                    }else{
                        // 取消全选
                        for(var i = 0; i < aihaos.length; i ++){
                            aihaos[i].checked = false;
                        }
                    }
                }
            }*/
            window.onload = function () {
                var aihaos = document.getElementsByName("aihao");
                var firstChkElt = document.getElementById("firstChk");
                firstChkElt.onclick = function () {
                    // 先获取第一个复选框的选中状态（复选框对象是checkbox对象）
                    // alert(firstChkElt.checked);
                    // 根据name获取所有元素
                    for(var i = 0; i < aihaos.length; i ++){
                        aihaos[i].checked = firstChkElt.checked;
                    }
                }

                // 对以上数组进行遍历
                var all = aihaos.length;
                for(var i = 0; i < aihaos.length; i ++){
                    aihaos[i].onclick = function () {
                        var checkedCount = 0;
                        // 总数量和选中的数量相等的时候，第一个复选框选中。
                        for(var i = 0; i < aihaos.length; i ++){
                            if(aihaos[i].checked){
                                checkedCount ++;
                            }
                        }
                        /*
                        if(all == checkedCount){
                            firstChkElt.checked = true;
                        }else{
                            firstChkElt.checked = false;
                        }*/
                        firstChkElt.checked = (all == checkedCount);
                    }
                }
            }


        script>

        <input type="checkbox" id="firstChk"/><br>
        <input type="checkbox" name="aihao" vlaue="smoke"/>抽烟<br>
        <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
        <input type="checkbox" name="aihao" value="tt"/>烫头<br>
    body>

html>

007-DOM编程-

008-DOM编程-显示网页时钟

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>显示网页时钟title>
    head>
    <body>
        <script type="text/javascript">
            /*
                关于JS中内置的支持类，Date，可以用来获取时间/日期
             */
            // 获取系统当前时间
            var nowTime = new Date();
            // 输出
            //document.write(nowTime);
            // 转换成具有本地语言环境的日期格式。
            nowTime = nowTime.toLocaleString();
            document.write(nowTime);
            document.write("
");
            document.write("
");

            // 当以上格式不是自己想要的，可以通过日期获取年月日等信息，自定义日期格式。
            var t = new Date();
            var year = t.getFullYear(); // 返回年信息，以全格式返回。
            var month = t.getMonth(); // 月份是0-11
            //var dayOfWeek = t.getDay(); // 获取的是一周的第几天0-6
            var day = t.getDate(); // 获取日信息
            document.write(year + "年" + (month + 1) + "月" + day + "日");
            document.write("
");
            document.write("
");

            // 重点：怎么获取毫秒数?（从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数）
            var times = t.getTime();
            //document.write(times); // 一般会使用毫秒数作为时间戳。（timestamp）

            document.write(new Date().getTime());

        script>

        <script type="text/javascript">
            function displayTime(){
                var time = new Date();
                var strTime = time.toLocaleString();
                document.getElementById("timeDiv").innerHTML = strTime;
            }
            // 每隔1秒钟调用displayTime()函数
            function start(){
                // 从这行代码执行结束开始，则会不间断的，每隔1000毫秒调用一次displayTime()函数
                v = window.setInterval("displayTime(), 1000");
            }

            function stop(){
                window.clearInterval(v);
            }
        script>

        <br><br>
        <input type="button" value="显示系统时间" onclick="start();"/>
        <input type="button" value="系统时间停止" onclick="stop();"/>
        <div id="timeDiv">div>


    body>
html>

009-DOM编程-内置支持类Array

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内置支持类Arraytitle>
    head>
    <body>
        <script type="text/javascript">
            /*
            // 创建长度为0的数组
            var arr = [];
            alert(arr.length);

            var arr2 = [1,2,3,false,"abc",3.14]; // 最常用
            alert(arr2.length); // 6

            // 下标越界吗
            arr2[7] = "test"; // 自动扩容

            // 遍历
            for(var i = 0; i < arr2.length; i++){
                document.write(arr2[i] + "
");
            }

            // 另外一种创建数组的对象的方式.
            var a = new Array();
            alert(a.length); // 0

            var a2 = new Array(3); // 3表示长度
            alert(a2.length); // 3

            var a3 = new Array(3,2);// 具体存储的元素3和2
            alert(a3.length); // 2

             */
            var a = [1,2,3,9];
            var str = a.join("-"); // "1-2-3-9"
            alert(str);

            // 在数组的末尾添加一个元素（数组长度加1）
            a.push(10);
            alert(a.join("-")); // "1-2-3-9-10"

            // 将数组末尾元素弹出
            var endElt = a.pop(); // 10
            alert(a.join("-")); // "1-2-3-9"

            // 注意：JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则。
            // push压栈
            // pop弹栈

            // 反转数组
            a.reverse();
            alert(a.join("-")); // "9-3-2-1"


        script>
    body>
html>

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取 HtmlExtractor 精准抽取信息采集
HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。 HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。如
java编程思想 -- 多态百合不是茶 java 多态详解
一: 向上转型和向下转型面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
[自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长.... 首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
storm 自定义日志文件商人shang storm cluster logback
Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下：（由于使用了父类aaa
一些排错方法文强chu 方法
1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
Swing中文件恢复我觉得很难小桔子 swing
我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
php 文件操作 aichenglong PHP 读取文件写入文件
1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
MySQL的btree索引和hash索引的区别 AILIKES 数据结构 mysql 算法
Hash 索引结构的特殊性，其检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
JAVA的抽象--- 接口 --实现百合不是茶
抽象接口实现接口 //抽象类 ,方法 //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体抽象的定义使用abstract abstract class A 定义一个抽象类例如： //定义一个基类 public abstract class A{ //抽象类不能用来实例化，只能用来继承 //
JS变量作用域实例 bijian1013 作用域
<script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
TDD实践（二） bijian1013 java TDD
实践题目：分解质因数 Step1：单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
[MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。本文介绍MongoDB的主从复制模式，需要指明
【HBase五】Java API操作HBase bit1129 hbase
import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
python调用zabbix api接口实时展示数据 ronin47
zabbix api接口来进行展示。经过思考之后，计划获取如下内容： 1、获得认证密钥 2、获取zabbix所有的主机组 3、获取单个组下的所有主机 4、获取某个主机下的所有监控项
jsp取得绝对路径 byalias 绝对路径
在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下：一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
Java定时任务调度：用ExecutorService取代Timer bylijinnan java
《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是：如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
SQL 优化原则 chicony sql
一、问题的提出　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
java 线程弹球小游戏 CrazyMizzz java 游戏
最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
hadoop jps出现process information unavailable提示解决办法 daizj hadoop jps
hadoop jps出现process information unavailable提示解决办法 jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
PHP图片水印缩放类实现 dcj3sjt126com PHP
<?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
IOS控件学习：UILabel常用属性与用法 dcj3sjt126com ios UILabel
参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
完全手动建立maven骨架 eksliang java eclipse Web
建一个 JAVA 项目： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
配置清单 gengzg 配置
1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
Windows端口被占用处理方法 huqiji windows
以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等. 这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
开源ckplayer 网页播放器，跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！天梯梦 mobile
CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
简单工厂设计模式 hm4123660 java 工厂设计模式简单工厂模式
简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
maven笔记 zhb8015 maven
跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。指定测试类 mvn test
非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer map hbase reduce Hfile path实例
最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
jsp web tomcat 编码问题王新春 tomcat jsp pageEncode
今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi

JavaScript基础03 - DOM编程

JavaScript基础03

001-DOM编程- 获取文本框的value

002-DOM编程-innerHTML和innerText操作div和span

003-DOM编程-关于正则表达式

004-DOM编程-去除字符串前后的空白

005-DOM编程-表单验证

006-DOM编程-复选框的全选和取消全选

007-DOM编程-

008-DOM编程-显示网页时钟

009-DOM编程-内置支持类Array

你可能感兴趣的:(javascript,html,css)