动态背景的登入注册界面

最新推荐文章于 2024-04-24 10:01:52 发布

于北斋

最新推荐文章于 2024-04-24 10:01:52 发布

阅读量1.6k

点赞数 3

分类专栏： canvas JavaScript 文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_50898676/article/details/125177541

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

登入注册是做网页最基础要会做的一个功能，上面的界面用到了HTML、CSS、JavaScript、canvas、Jquery知识。动态背景是用HTML5的新特性canvas编写的。

可参考替换的背景额如下：

登入注册的源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>登入注册界面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      /* body{
            background-color: black;
        } */
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: rgb(10, 9, 9);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .main {
        width: 400px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      ul {
        list-style-type: none;
      }
      li {
        text-align: center;
        margin-bottom: 20px;
      }
      input {
        font-size: 25px;
        background: transparent;
        border: 1px solid white;
        padding: 10px;
        border-radius: 10px;
        outline: none;
        color: white;
      }
      button {
        font-size: 25px;
        border: 1px solid gray;
        padding: 5px 20px;
        background: transparent;
        color: gray;
        border-radius: 5px;
      }
      #dl {
        font-size: 10px;
        border: 1px solid gray;
        padding: 5px 20px;
        background: transparent;
        color: gray;
        border-radius: 5px;
      }
      #zc {
        font-size: 10px;
        border: 1px solid gray;
        padding: 5px 20px;
        background: transparent;
        color: gray;
        border-radius: 5px;
      }
      #check {
        width: 100%;
        height: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #check span {
        height: 100%;
        width: 22%;
        margin: 0 5px;
        background: black;
      }
      

    </style>
  </head>
  <body>
    <div class="main">
      
      <div id="login">
        
        <ul>
            <li>
                <button id="dl" onmouseover='onMouseOver()' onclick="changePage('login')">登入</button>
                <button id="zc" onmouseover='onMouseOver()' onclick="changePage('register')">注册</button>
            </li>
        </ul>
        <ul>
          <li>
            <input type="text" placeholder="用户名" id="user" />
          </li>
          <li>
            <input type="password" placeholder="请输入密码" id="pass" />
          </li>
          <li><button>登入</button></li>
        </ul>
      </div>
      <div id="register" style="display: none">
        <ul>
            <li>
                <button id="dl" onmouseover='onMouseOver()' onclick="changePage('login')">登入</button>
                <button id="zc" onmouseover='onMouseOver()' onclick="changePage('register')">注册</button>
            </li>
        </ul>
        <ul>
          <li>
            <input type="text" placeholder="用户名" id="user" />
          </li>
          <li>
            <input type="password" placeholder="请输入密码" id="pass" />
          </li>
          <li>
            <input type="password" placeholder="请重复密码" id="repass" />
          </li>

          <li><button>注册</button></li>
        </ul>
      </div>
    </div>
  </body>
  <script
    type="text/javascript"
    src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"
  ></script>
  　
  <script>
    function changePage(val) {
      var login_div = document.getElementById("login");
    //   var dl_div = document.getElementById("dl");
      var register_div = document.getElementById("register");
    //   var zc = document.getElementById("zc");
      if (val == "login") {
        // el.style.backgroundColor = 'red'
        login_div.style.display = "block"; // 切换效果的关键，思路就是将要显示的 display设置为 block
        register_div.style.display = "none"; // 然后将要隐藏的盒子的 display 设置为 none
      } else if (val == "register") {
        login_div.style.display = "none"; // 同上
        register_div.style.display = "block";
      }
    }
    function onMouseOver() {
        var dl1 = document.getElementById("dl");
      var zc1 = document.getElementById("zc");
    }
    !(function () {
      function n(n, e, t) {
        return n.getAttribute(e) || t;
      }
      function e(n) {
        return document.getElementsByTagName(n);
      }
      function t() {
        var t = e("script"),
          o = t.length,
          i = t[o - 1];
        return {
          l: o,
          z: n(i, "zIndex", -1),
          o: n(i, "opacity", 0.5),
          c: n(i, "color", "34,255,34"),
          n: n(i, "count", 99),
        };
      }
      function o() {
        (a = m.width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth),
          (c = m.height =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight);
      }
      function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function (i, x) {
          for (
            i.x += i.xa,
              i.y += i.ya,
              i.xa *= i.x > a || i.x < 0 ? -1 : 1,
              i.ya *= i.y > c || i.y < 0 ? -1 : 1,
              r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
              e = x + 1;
            e < u.length;
            e++
          )
            (n = u[e]),
              null !== n.x &&
                null !== n.y &&
                ((o = i.x - n.x),
                (m = i.y - n.y),
                (l = o * o + m * m),
                l < n.max &&
                  (n === y &&
                    l >= n.max / 2 &&
                    ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
                  (t = (n.max - l) / n.max),
                  r.beginPath(),
                  (r.lineWidth = t / 2),
                  (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
                  r.moveTo(i.x, i.y),
                  r.lineTo(n.x, n.y),
                  r.stroke()));
        }),
          x(i);
      }
      var a,
        c,
        u,
        m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x =
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (n) {
            window.setTimeout(n, 1e3 / 45);
          },
        w = Math.random,
        y = {
          x: null,
          y: null,
          max: 2e4,
        };
      (m.id = l),
        (m.style.cssText =
          "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
        e("body")[0].appendChild(m),
        o(),
        (window.onresize = o),
        (window.onmousemove = function (n) {
          (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
        }),
        (window.onmouseout = function () {
          (y.x = null), (y.y = null);
        });
      for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
          g = w() * c,
          v = 2 * w() - 1,
          p = 2 * w() - 1;
        s.push({
          x: h,
          y: g,
          xa: v,
          ya: p,
          max: 6e3,
        });
      }
      (u = s.concat([y])),
        setTimeout(function () {
          i();
        }, 100);
    })();
  </script>
</html>

参考：

网页动态背景——随鼠标变换的动态线条（鼠标蜘蛛网特效）_皇上爱傻妞的博客-CSDN博客_网页动态背景

对于学习canvas，个人觉得需要先掌握好css和js,同时需要好的数学基础。