javascript三个案例

已于 2024-03-08 23:22:22 修改
阅读量222 收藏
点赞数 2
文章标签： javascript 前端 开发语言
于 2024-03-08 23:19:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58188818/article/details/136574357
版权

js 案例

  1. div 拖拽改变大小

引入 jqery 库

<script src="./js/jquery-1.8.3.js"></script>

基本布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        position: absolute;
        width: 30px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="test">1111111</div>
    <script src="./js/jquery-1.8.3.js"></script>
  </body>
</html>
  1. 获取 dom
    let mydiv = document.getElementById(“test”);

编辑鼠标点击事件

mydiv.onmousedown = function (e) {
          let ev = e || window.event;
          let disX = ev.clientX - mydiv.offsetLeft;
          let disY = ev.clientY - mydiv.offsetTop;
          // console.log(disX);
          // console.log(disY);
          if (mydiv.setCapture) {
            mydiv.setCapture(); //解决ie8一下文本层问题
          }

编辑鼠标拖动事件

 document.onmousemove = function (e) {
         let ev = e || window.event;
         mydiv.style.left = ev.clientX - disX + "px";
         mydiv.style.top = ev.clientY - disY + "px";
         // console.log(mydiv.style.left);
         // console.log(mydiv.style.top);
       };

编辑放开鼠标时间

	document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        if (mydiv.releaseCapture) {
          mydiv.releaseCapture();
        }
      };

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        width: 300px;
        height: 200px;
      }
      div {
        position: absolute;
        width: 300px;
        height: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="test">
      1111111
      <img src="" alt="" />
    </div>
    <script src="./js/jquery-1.8.3.js"></script>
    <script>
      $(function () {
        let mydiv = document.getElementById("test");
        // console.log(mydiv);
        mydiv.onmousedown = function (e) {
          let ev = e || window.event;
          let disX = ev.clientX - mydiv.offsetLeft;
          let disY = ev.clientY - mydiv.offsetTop;
          // console.log(disX);
          // console.log(disY);
          if (mydiv.setCapture) {
            mydiv.setCapture(); //解决ie8一下文本层问题
          }
          document.onmousemove = function (e) {
            let ev = e || window.event;
            mydiv.style.left = ev.clientX - disX + "px";
            mydiv.style.top = ev.clientY - disY + "px";
            // console.log(mydiv.style.left);
            // console.log(mydiv.style.top);
          };
          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            if (mydiv.releaseCapture) {
              mydiv.releaseCapture();
            }
          };
          return false;
        };
      });
    </script>
  </body>
</html>

在这里插入图片描述

  1. 字符穿综合

基本布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
      }
      p {
        margin: 100px auto;
        padding: 20px;
        width: 400px;
        border: 5px solid #808080;
        font-size: 18px;
      }
      a {
        font-size: 14px;
      }
      .btn {
        width: 40px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border: 1px solid #808080;
      }
      .btn {
        background: #dcdcdc;
        padding: 5px;
        position: absolute;
        left: 50%; /*让元素居中写法*/
        margin-left: 225px;
        top: 100px;
        cursor: pointer;
      }
      #ChangeCard {
        width: 300px;
        height: 100px;
        padding: 20px;
        border: 5px solid #cd5c5c;
        position: absolute;
        left: 50%; /*让元素居中写法*/
        margin-left: -170px;
        top: 300px;
        overflow: hidden;
        display: none;
      }
      .Change_div {
        float: left;
        width: 40px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px;
        cursor: pointer;
      }
      .myChange {
        clear: left;
        border-top: 2px solid #db7093;
        padding: 20px;
      }
      input[type="text"] {
        display: inline-block;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <p>
      <span>
        妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！
        2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……
      </span>
      <a href="javascript:;">>>收缩</a>
    </p>
    <div class="btn">查找</div>
    <div class="btn" style="top: 135px">替换</div>
    <div id="ChangeCard">
      <div class="Change_div">查找</div>
      <div class="Change_div">替换</div>
      <div class="myChange">
        <input class="myContent" type="text" />
        <input class="do_btn" type="button" value="查找" />
      </div>
      <div class="myChange">
        <input class="myContent" type="text" />
        <input class="myContent" type="text" />
        <input class="do_btn" type="button" value="替换" />
      </div>
    </div>
  </body>
</html>

获取 dom

let oSpan = document.getElementsByTagName("span");
let oA = document.getElementsByTagName("a");
let btn = true;
let oldContent = oSpan[0].innerHTML;

编辑文本展开与搜索

oA[0].onclick = function () {
  if (btn) {
    oSpan[0].innerHTML = oldContent.substring(0, 27) + "......";
    oA[0].innerHTML = ">>展开";
  } else {
    oSpan[0].innerHTML = oldContent;
    oA[0].innerHTML = ">>收缩";
  }
  btn = !btn;
}; //将文本展开与收缩

编辑查找替换卡片

let myDiv = document.getElementById("ChangeCard");
let oBtn = document.getElementsByClassName("btn");
let Change_div = document.getElementsByClassName("Change_div");
oBtn[0].onclick = function () {
  // 编辑切换功能
  myDiv.style.display = "block";
  document.getElementsByClassName("Change_div")[0].style.background = "#db7093";
  document.getElementsByClassName("Change_div")[1].style.background = "#fff";
  document.getElementsByClassName("myChange")[0].style.display = "block";
  document.getElementsByClassName("myChange")[1].style.display = "none";
};
oBtn[1].onclick = function () {
  myDiv.style.display = "block";
  document.getElementsByClassName("Change_div")[0].style.background = "#fff";
  document.getElementsByClassName("Change_div")[1].style.background = "#db7093";
  document.getElementsByClassName("myChange")[0].style.display = "none";
  document.getElementsByClassName("myChange")[1].style.display = "block";
};
Change_div[0].onclick = function () {
  document.getElementsByClassName("Change_div")[0].style.background = "#db7093";
  document.getElementsByClassName("Change_div")[1].style.background = "#fff";
  document.getElementsByClassName("myChange")[0].style.display = "block";
  document.getElementsByClassName("myChange")[1].style.display = "none";
};
Change_div[1].onclick = function () {
  document.getElementsByClassName("Change_div")[0].style.background = "#fff";
  document.getElementsByClassName("Change_div")[1].style.background = "#db7093";
  document.getElementsByClassName("myChange")[0].style.display = "none";
  document.getElementsByClassName("myChange")[1].style.display = "block";
};

编辑查找功能

var do_btns = document.getElementsByClassName("do_btn");
      do_btns[0].onclick = function () {
        let str = /^\S+$/;
        let myContent = oSpan[0].innerHTML;
        let mySearch = document.getElementsByClassName("myContent")[0].value;
        if (str.test(mySearch)) {
          if (myContent.split(mySearch).length == 1) {
            alert("没找到");
            document.getElementsByClassName("myContent")[0].value = ""; //清空
            return false;
          }
          oSpan[0].innerHTML = myContent
            .split(mySearch)
            .join("<span style='background:#ff0;'> " + mySearch + "</span>");
          oldContent = oSpan[0].innerHTML;
          document.getElementsByClassName("myContent")[0].value = ""; //清空
        } else {
          alert("请输入查找内容");
        }

编辑替换功能

do_btns[1].onclick = function () {
  let str = /^\S+$/;
  let myContent = oSpan[0].innerHTML;
  let myChange1 = document.getElementsByClassName("myContent")[1].value;
  let myChange2 = document.getElementsByClassName("myContent")[2].value;
  if (!str.test(myChange1)) {
    alert("输入要替换的内容");
    return false;
  }
  if (!str.test(myChange2)) {
    if (confirm("确定要删除吗")) {
      oSpan[0].innerHTML = myContent
        .split(myChange1)
        .join("<span style = 'background:orange;'>" + myChange2 + "</span>");
      document.getElementsByClassName("myChange")[1].value = ""; //清空
      return false;
    }
  }
  oSpan[0].innerHTML = myContent
    .split(myChange1)
    .join("<span style = 'background:orange;'>" + myChange2 + "</span>");
  oldContent = oSpan[0].innerHTML;
  document.getElementsByClassName("myContent")[1].value = ""; //清空
  document.getElementsByClassName("myChange")[2].value = "";
};

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
      }
      p {
        margin: 100px auto;
        padding: 20px;
        width: 400px;
        border: 5px solid #808080;
        font-size: 18px;
      }
      a {
        font-size: 14px;
      }
      .btn {
        width: 40px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border: 1px solid #808080;
      }
      .btn {
        background: #dcdcdc;
        padding: 5px;
        position: absolute;
        left: 50%; /*让元素居中写法*/
        margin-left: 225px;
        top: 100px;
        cursor: pointer;
      }
      #ChangeCard {
        width: 300px;
        height: 100px;
        padding: 20px;
        border: 5px solid #cd5c5c;
        position: absolute;
        left: 50%; /*让元素居中写法*/
        margin-left: -170px;
        top: 300px;
        overflow: hidden;
        display: none;
      }
      .Change_div {
        float: left;
        width: 40px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px;
        cursor: pointer;
      }
      .myChange {
        clear: left;
        border-top: 2px solid #db7093;
        padding: 20px;
      }
      input[type="text"] {
        display: inline-block;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <p>
      <span>
        妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！
        2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……
      </span>
      <a href="javascript:;">>>收缩</a>
    </p>
    <div class="btn">查找</div>
    <div class="btn" style="top: 135px">替换</div>
    <div id="ChangeCard">
      <div class="Change_div">查找</div>
      <div class="Change_div">替换</div>
      <div class="myChange">
        <input class="myContent" type="text" />
        <input class="do_btn" type="button" value="查找" />
      </div>
      <div class="myChange">
        <input class="myContent" type="text" />
        <input class="myContent" type="text" />
        <input class="do_btn" type="button" value="替换" />
      </div>
    </div>
    <script>
      let oSpan = document.getElementsByTagName("span");
      let oA = document.getElementsByTagName("a");
      let btn = true;
      let oldContent = oSpan[0].innerHTML;
      oA[0].onclick = function () {
        if (btn) {
          oSpan[0].innerHTML = oldContent.substring(0, 27) + "......";
          oA[0].innerHTML = ">>展开";
        } else {
          oSpan[0].innerHTML = oldContent;
          oA[0].innerHTML = ">>收缩";
        }
        btn = !btn;
      }; //将文本展开与收缩
      let myDiv = document.getElementById("ChangeCard");
      let oBtn = document.getElementsByClassName("btn");
      let Change_div = document.getElementsByClassName("Change_div");
      oBtn[0].onclick = function () {
        // 编辑切换功能
        myDiv.style.display = "block";
        document.getElementsByClassName("Change_div")[0].style.background =
          "#db7093";
        document.getElementsByClassName("Change_div")[1].style.background =
          "#fff";
        document.getElementsByClassName("myChange")[0].style.display = "block";
        document.getElementsByClassName("myChange")[1].style.display = "none";
      };
      oBtn[1].onclick = function () {
        myDiv.style.display = "block";
        document.getElementsByClassName("Change_div")[0].style.background =
          "#fff";
        document.getElementsByClassName("Change_div")[1].style.background =
          "#db7093";
        document.getElementsByClassName("myChange")[0].style.display = "none";
        document.getElementsByClassName("myChange")[1].style.display = "block";
      };
      Change_div[0].onclick = function () {
        document.getElementsByClassName("Change_div")[0].style.background =
          "#db7093";
        document.getElementsByClassName("Change_div")[1].style.background =
          "#fff";
        document.getElementsByClassName("myChange")[0].style.display = "block";
        document.getElementsByClassName("myChange")[1].style.display = "none";
      };
      Change_div[1].onclick = function () {
        document.getElementsByClassName("Change_div")[0].style.background =
          "#fff";
        document.getElementsByClassName("Change_div")[1].style.background =
          "#db7093";
        document.getElementsByClassName("myChange")[0].style.display = "none";
        document.getElementsByClassName("myChange")[1].style.display = "block";
      };
      // 查找
      var do_btns = document.getElementsByClassName("do_btn");
      do_btns[0].onclick = function () {
        let str = /^\S+$/;
        let myContent = oSpan[0].innerHTML;
        let mySearch = document.getElementsByClassName("myContent")[0].value;
        if (str.test(mySearch)) {
          if (myContent.split(mySearch).length == 1) {
            alert("没找到");
            document.getElementsByClassName("myContent")[0].value = ""; //清空
            return false;
          }
          oSpan[0].innerHTML = myContent
            .split(mySearch)
            .join("<span style='background:#ff0;'> " + mySearch + "</span>");
          oldContent = oSpan[0].innerHTML;
          document.getElementsByClassName("myContent")[0].value = ""; //清空
        } else {
          alert("请输入查找内容");
        }
      };
      // 替换
      do_btns[1].onclick = function () {
        let str = /^\S+$/;
        let myContent = oSpan[0].innerHTML;
        let myChange1 = document.getElementsByClassName("myContent")[1].value;
        let myChange2 = document.getElementsByClassName("myContent")[2].value;
        if (!str.test(myChange1)) {
          alert("输入要替换的内容");
          return false;
        }
        if (!str.test(myChange2)) {
          if (confirm("确定要删除吗")) {
            oSpan[0].innerHTML = myContent
              .split(myChange1)
              .join(
                "<span style = 'background:orange;'>" + myChange2 + "</span>"
              );
            document.getElementsByClassName("myChange")[1].value = ""; //清空
            return false;
          }
        }
        oSpan[0].innerHTML = myContent
          .split(myChange1)
          .join("<span style = 'background:orange;'>" + myChange2 + "</span>");
        oldContent = oSpan[0].innerHTML;
        document.getElementsByClassName("myContent")[1].value = ""; //清空
        document.getElementsByClassName("myChange")[2].value = "";
      };
    </script>
  </body>
</html>

在这里插入图片描述

  1. 瀑布流

基本布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 100%;
      }
      .wrap .cont {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
      }
      .wrap ul {
        float: left;
        margin: 0 25px;
        list-style: none;
      }
      .wrap ul li {
        width: 200px;
        background: #dcdcdc;
        margin: 10px 0;
      }
      h2 {
        height: 70px;
        line-height: 70px;
        background: #101010;
        padding-left: 50px;
        color: #fff;
      }
      .wrap ul .h1 {
        height: 200px;
      }
      .wrap ul .h2 {
        height: 70px;
      }
      .wrap ul .h3 {
        height: 300px;
      }
      .wrap ul .h4 {
        height: 180px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h2>瀑布流展示：</h2>
      <div class="cont">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
      </div>
    </div>
  </body>
</html>

引入 jqery 库

<script src="./js/jquery-1.8.3.js"></script>

将随机高度的 ul 加入到最小高度的 ul 里

function appendLi() {
  let ulList = $(".cont > ul");
  let ul1_h = ulList[0].offsetHeight;
  let ul2_h = ulList[1].offsetHeight;
  let ul3_h = ulList[2].offsetHeight;
  let ul4_h = ulList[3].offsetHeight;
  let minUl = Math.min(ul1_h, ul2_h, ul3_h, ul4_h);
  let min_ul;
  let lis;
  let classH;
  for (var i = 0; i < ulList.length; i++) {
    if (ulList[i].offsetHeight == minUl) {
      min_ul = ulList[i];
    }
    classH = getRanddomHeight();
    lis = '<li class="h' + classH + '"></li>';
  }
  $(min_ul).append(lis);
}

向下生成新高度

function getRanddomHeight() {
  return Math.floor(Math.random() * 3 + 1);
}

像无序列表添加不同高度的列表项

$(function () {
  for (var i = 0; i < 20; i++) {
    appendLi();
  }
});

出发滚动事件

$(window).on("scroll", function () {
  if (
    $(document).scrollTop() + $(window).height() >
    $(document).height() - 20
  ) {
    $(document).scrollTop($(document).scrollTop() - 10);
    appendLi();
  }
});

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 100%;
      }
      .wrap .cont {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
      }
      .wrap ul {
        float: left;
        margin: 0 25px;
        list-style: none;
      }
      .wrap ul li {
        width: 200px;
        background: #dcdcdc;
        margin: 10px 0;
      }
      h2 {
        height: 70px;
        line-height: 70px;
        background: #101010;
        padding-left: 50px;
        color: #fff;
      }
      .wrap ul .h1 {
        height: 200px;
      }
      .wrap ul .h2 {
        height: 70px;
      }
      .wrap ul .h3 {
        height: 300px;
      }
      .wrap ul .h4 {
        height: 180px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h2>瀑布流展示：</h2>
      <div class="cont">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
      </div>
    </div>
    <script src="./js/jquery-1.8.3.js"></script>
    <script>
      function appendLi() {
        let ulList = $(".cont > ul");
        let ul1_h = ulList[0].offsetHeight;
        let ul2_h = ulList[1].offsetHeight;
        let ul3_h = ulList[2].offsetHeight;
        let ul4_h = ulList[3].offsetHeight;
        let minUl = Math.min(ul1_h, ul2_h, ul3_h, ul4_h);
        let min_ul;
        let lis;
        let classH;
        for (var i = 0; i < ulList.length; i++) {
          if (ulList[i].offsetHeight == minUl) {
            min_ul = ulList[i];
          }
          classH = getRanddomHeight();
          lis = '<li class="h' + classH + '"></li>';
        }
        $(min_ul).append(lis);
      }
      function getRanddomHeight() {
        return Math.floor(Math.random() * 3 + 1);
      }
      $(function () {
        for (var i = 0; i < 20; i++) {
          appendLi();
        }
      });
      $(window).on("scroll", function () {
        if (
          $(document).scrollTop() + $(window).height() >
          $(document).height() - 20
        ) {
          $(document).scrollTop($(document).scrollTop() - 10);
          appendLi();
        }
      });
    </script>
  </body>
</html>

在这里插入图片描述

只会_摆烂
关注
javaScript常用案例
张张张张张高高的博客
09-06 9251
前端页面开发之javaScript常用案例
JavaScript函数案例
qq_58492621的博客
07-23 1065
JavaScript函数案例，包含基本函数、arguments的使用以及构造函数的案例介绍，是比较全面典型的案例，对熟悉函数有很大的作用。
javaScript购物车案例
l18937842167的博客
10-12 1725
javaScript原生购物车代码案例
Javascript高级+小案例
qq_45638271的博客
04-11 2994
BOM：Windows对象 目标 掌握Windows对象的基本使用 路径 BOM介绍 Window对象 BOM介绍 BOM是Browser Object Model的缩写，简称浏览器对象模型，是将使用的浏览器抽象成对象模型。 简单理解：把整个浏览器当做一个对象来处理。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 Screen对象， Screen 对象中存放着有关显示浏览器屏幕的信息。 Navigator对象，包含的属性描述了正在使用的浏览器(当前浏览器的相关
javaScript简单项目案例
热门推荐
Anterior_condyle的博客
06-10 1万+
js简单案例案例一：完成多分支案例“年龄层判断”（代码和效果图）。案例二：完成“prompt()方法及动态输入实现矩形周长面积计算”的案例（代码和效果图）。案例三：完成“二维数组的数据访问实现试题展示”的案例（代码和效果图）。案例四：完成“考试倒计时的实现”的案例（代码和效果图）。案例五：完成“随机点名器的实现”的案例（代码和效果图）案例六：完成“下拉列表框的应用”的案例（代码和效果图）。案例七：完成“正则表达式实现表单严谨验证”的案例（代码和效果图）。案例八：完成“计算器功能实现”的案例（代码和效果图）。
JavaScript项目案例
Anterior_condyle的博客
06-10 8411
简单案例案例一：完成“鼠标经过切换图片”的案例案例二：完成“百度换肤效果”的案例案例三：完成“鼠标展示”的案例（代码及效果图）案例四：完成“表单验证”的案例；改进并完成对密码进行确认操作。案例五：结合改进的“表单验证”优化“模态框”案例（自行设计）。案例六：完成“二级联动菜单”的案例案例七：完成“星星案例”的案例案例八：完成“图片的切换”的案例 案例一：完成“鼠标经过切换图片”的案例 代码： <!DOCTYPE html> <html> <head> <met
javascript判断成绩案例
2302_76195408的博客
01-25 1071
if else if 多分支语句 简单案例
javascript网页设计案例
liyy614的博客
09-03 1475
JavaScript在网页设计中扮演着重要的角色，能够实现动态效果和交互功能，提升用户体验。下面，我将通过一个具体的案例——“动态图片轮播”来展示JavaScript在网页设计中的应用。
javascript 四 简单效果案例
wwwfdfsf的博客
07-23 556
代码】javascript四简单效果案例。
JavaScript 基本案例
ONESTARの博客
08-22 1830
目录 案例一、window 弹窗案例 案例二、同步时间 案例三、全选 案例四：下拉列表右移 案例五、级联下拉 案例六、动态创建表格 案例一、window 弹窗案例 <html> <head> <title>oneStar</title> </head> <body> 编号：<in...
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip
07-06
三、JavaScript（脚本语言） JavaScript是实现网页交互性的关键，教学大纲会涵盖变量、数据类型、控制流、函数等基础语法，以及DOM操作、事件处理、Ajax异步通信等高级话题。学生将学习如何编写能够响应用户行为的...
JavaScript案例-原生ajax
02-16
它接受三个参数：请求类型（GET、POST等）、URL和是否异步执行。例如，`xhr.open('GET', 'example.php', true)`。 3. **设置请求头**：对于POST请求，我们通常需要设置`Content-Type`请求头，如`xhr....
JavaScript小案例.zip
01-18
这三个案例覆盖了JavaScript基础中的事件处理、DOM操作和表单交互，这些都是网页开发中不可或缺的技能。通过学习和实践这些案例，你可以深入了解如何用JavaScript与用户进行交互，提升网页的用户体验。同时，这也是...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4451
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
李浩洋
09-24 215
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。up-form组件 :model=“formData” :rules=“rules”要赋初始值
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 845
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 558
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
最新发布
m0_59480939的博客
09-25 220
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只会_摆烂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值