前端代码案例

l1477026345

已于 2023-07-21 08:38:12 修改

阅读量552

点赞数 2

文章标签：前端 javascript html Powered by 金山文档

于 2023-02-01 17:45:06 首次发布

本文链接：https://blog.csdn.net/l1477026345/article/details/128837242

版权

案例1:js实现双向绑定

代码引用叶子yes

<!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>Document</title>
</head>
<body>
  <!-- 输入框 -->
  <input type="text" id="inputText">
  <!-- 内容展示区 -->
  <div id="showContent"></div>
  <script>
    // 创建一个数据容器对象
    var dataObj = {}
    // 访问器属性新增一个属性  用户输入的值
    Object.defineProperty(dataObj,'inputText',{
      get:function(){
        return 10
      },
      set:function(newValue){
        // 给div的内容做一个赋值
        document.getElementById('showContent').innerHTML = newValue
      }
    })

    // 获取到用户输入的值 DOM 命令式编程
    document.getElementById('inputText').addEventListener('input', function (event) {
      // 给数据容器中的inputText进行赋值 调用set方法
      dataObj.inputText = event.target.value
    })
  </script>
</body>
</html>

案例2:html发送指定请求

<html>
    <head>
        <script>
            function a(){
                var xhr = new XMLHttpRequest();
                xhr.open("get",document.getElementById("url").value,true)
                xhr.send(null)
            }
        </script>
    </head>
    <body>
        <input id="url" value="http://127.0.0.1:8080/">
        <button onclick=a()>发送</button>
    </body>
</html>

html form

一：表单属性

表单一共有五个重要属性：name 、 action、 method 和 target属性

1 name 属性

一个页面上的表单可能不止一个，为了区分这些表单，就需要name 属性给表单命名，通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。

2 action属性

用于指定表单数据提交到那个地址进行处理。

3 method属性

作用是告诉浏览器，指定将表单中的数据使用哪一种HTTP提交方法，取值为get 或者 post。

其中：get 是默认值，表单中的数据被传送到action 属性指定的URL，然后这个新的URL 被传送到处理程序上。

post：表单数据被包含在表单主体中，然后被传送到处理程序上。

两者区别：

get：该请求会将请求参数的名和值转换成字符串，然后拼接到URL 之后，因此在地址栏等地方可以看到请求的参数；但是安全性差，并且安全性差，传输的数量比较小，在URL中的最大长度是2048个字符。

post：该请求方式通过HTTP的post 机制，将所有的请求参数的名和值放在HTML的header 中传输；并且安全性号，传输的数量也大。

4 target属性

该属性与a标签的target 属性一样，都是从来指定目标窗口的打开方式。

取值：

_self: 默认值，表示在当前的窗口打开页面。

_blank:在新的窗口打开页面。

_top: 表示页面载入到包含该链接的窗口，取值在当前的窗口中的所有页面。

_parent: 在父级窗口打开页面。

5 enctype属性

用于设置表单信息提交的编码方式；

取值：

application / x-www-form-urlencoded :默认编码方式；

multipart / form-data : MIME 编码，对于“上传文件” 这种表单必须选择该值；

text / plain: 空格转换为加号（+），但不对特殊字符编码。

————————————————

原文链接：https://blog.csdn.net/weixin_64122448/article/details/124068002

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>彩色圆环</title>
    </head>
    <body>
        <div class="loader" data-text="loading">
            <span class="loader-circle"></span>
            <span class="loader-circle"></span>
            <span class="loader-circle"></span>
            <span class="loader-circle"></span>
        </div>
    </body>
</html>
<script>
</script>
<style>
    .loader {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: visible;
        border-radius: 50%;
        box-shadow: inset 0 0 8px rgb(255 255 255 / 40%),
        0 0 25px rgb(255 255 255 / 80%);
    }
    .loader::after{
        content: attr(data-text);
        color: #CECECE;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 6px;
    }
    .loader::before {
        content: '';
        float: left;
        padding-top: 50%;
    }
    @keyframes loading {
        0% {transform: rotate(0);}
        100% {transform: rotate(-360deg);}
    }
    .loader-circle {
        display: block;
        position: absolute;
        border-radius: 50%;
        top:0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.8;
        mix-blend-mode: screen;
        filter: brightness(120%);
        animation: loading 2s infinite both;
    }
    .loader-circle:nth-last-of-type(1){
        box-shadow: inset 1px 0 0 1px #2979FF,4px 0 0 4px #2979FF; 
        animation-direction: reverse ;
        transform-origin: 49.6% 49.6%;
    }
    .loader-circle:nth-of-type(2){
        box-shadow: inset 1px 0 0 1px #FF1744,4px 0 0 4px #FF1744; 
        transform-origin: 49.6% 49.6%;    
    }
    .loader-circle:nth-of-type(3){
        box-shadow: inset 1px 0 0 1px #FFFF8D,4px 0 0 4px #FFFF8D; 
; 
        transform-origin: 49.6% 49.6%;    
    }
    .loader-circle:nth-of-type(4){
        box-shadow: inset 1px 0 0 1px #B2FF59,4px 0 0 4px #FF1744; 
        transform-origin: 49.6% 49.6%;    
    }

</style>