【html+css+js+es6】个人复习代码记录

最新推荐文章于 2024-10-02 05:39:15 发布
归忆_AC
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量381
点赞数 7
分类专栏： web学习文章标签： javascript html css
本文链接：https://blog.csdn.net/qq1677852098/article/details/136136660
版权
web学习专栏收录该内容
7 篇文章 1 订阅
订阅专栏
本文展示了HTML5Boilerplate的基础结构，包含JavaScript中的变量、函数、DOM操作、事件监听、Promise用法以及跨域请求的示例，同时涉及jQuery库的使用和GoogleAnalytics集成。
摘要由CSDN通过智能技术生成
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
  <style>
    * {
      margin: 20px;
    }
  </style>
</head>

<body>

<!-- Add your site or application content here -->
<img src="dist/icon.83aa3da3.png" alt="Logo">
<p>Hello world! This is HTML5 Boilerplate.</p>

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<script>
  console.log(num);
  var num = 10; // 结果是什么呢？
  document.write("要输出的内容");

  shuchu();

  function shuchu() {
    console.log("hanshu");
  }

  var user = {
    getName() {
      return "张三";
    }
  }

  console.log(user.getName());

  var allElements = document.getElementsByTagName('*');
  console.log(allElements);

  var newDiv = document.createElement('div');
  var newContent = document.createTextNode('Hello');
  newDiv.appendChild(newContent);
  document.body.appendChild(newDiv);
</script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>

  </tr>
</table>

<button style="width: 100px;height:100px" id="btn1">按钮</button>

<script>
  var btn1 = document.getElementById("btn1");
  btn1.ondblclick = function (Event) {
    console.log("双击事件");
    console.log(Event.target);
    console.log(Event.type);
    console.log(this);
    console.log(this.type);
    console.log('----')
  }
</script>

<br>
<input type="text" id="input1" placeholder="input number">

<script>
  var input1 = document.getElementById("input1");
  input1.oninput = function (e) {
    console.log(e.target);
    console.log(e.target.value);
  };

  input1.addEventListener('select', function (e) {
    console.log(e.type);
  }, false)

  input1.onchange = function (e) {
    console.log(e.target.value);
  }

</script>

<form action="http://baidu.com/s?wd=123456" method="post" name="myForm">
  <label for="name">输入姓名:</label>
  <input type="text" name="name" id="name" placeholder="your name">
  <input type="submit" value="提交">
</form>

<label for="myTextarea">输入文本：</label>
<textarea id="myTextarea" rows="4" cols="50">
这是一个示例文本框。用户可以在此输入多行文本。
</textarea>

<form id="myForm" onsubmit="submitHandle(event)">
  <label>输入用户名：
    <input type="text" name="username" placeholder="用户名">
    >
  </label>
  <button onclick="resetHandle()">重置数据</button>
  <button>提交</button>
</form>
<script>
  var myForm = document.getElementById("myForm")

  function resetHandle() {
    myForm.reset();
  }

  function submitHandle(e) {
    e.preventDefault();
    console.log("提交");

  }
</script>

<script>
  var name = "sxt";
  var user = {
    name: "itbaizhan",
    getName: function () {
      var that = this;  //
      setTimeout(function () {
        // console.log(this.name);
        console.log(that.name); //
      }, 1000)
    }
  };
  user.getName();
</script>

<script>
  /*  function showTop() {
      var scrollTop = document.documentElement.scrollTop;
      console.log('滚动条位置：' + scrollTop);
    }

    window.onscroll = showTop*/
  /*  function debounce(fn, delay) {
      let timer = null //借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, delay) // 简化写法
      }
    }

    // 然后是旧代码
    function showTop() {
      var scrollTop = document.documentElement.scrollTop;
      console.log('滚动条位置：' + scrollTop);
    }

    window.onscroll = debounce(showTop, 300)*/
  function throttle(fn, delay) {
    let valid = true;
    return function () {
      if (!valid) {
        //休息时间 暂不接客
        return;
      }
      // 工作时间，执行函数并且在间隔期内把状态位设为无效
      valid = false;
      setTimeout(function () {
        fn()
        valid = true;
      }, delay)
    }
  }

  function showTop() {
    var scrollTop = document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
  }

  window.onscroll = throttle(showTop, 300)
</script>

<script>
  var a = [];
  for (var i = 0; i < 10; i++) {
    a[i] = function () {
      console.log(i);
    };
  }
  a[6]();

  var a = [];
  for (var i = 0; i < 10; i++) {
    a[i] = (function (num) {
      return function () {
        console.log('num=' + num);
      };
    })(i);
  }
  a[6]();

  var a = [];
  for (let i = 0; i < 10; i++) {
    a[i] = function () {
      console.log(i);
    };
  }
  a[6]();
</script>

<script>
  var k1 = 10;
  var k1 = 20;
  console.log('k1=' + k1);
</script>

<script>
  for (let i = 0; i < 10; i++) {
    console.log('i=' + i);
  }
</script>

<script>
  let aa = "Hello";
  ({aa} = {aa: "hello"});
  console.log(aa);
</script>

<script>
  let url = "https://www.itbaizhan.com"
  let h1 = "<a href='" + url + "'>itbaizhan</a>"
  let h2 = `<a href='${url}'>itbaizhan</a>`

  let div1 = document.createElement('div');
  div1.innerHTML = h1;
  document.body.appendChild(div1);

  let div2 = document.createElement('div');
  div2.innerHTML = h2;
  document.body.appendChild(div2);
</script>

<script>
  let name2 = "Alice";
  let age = 30;

  // 使用模板字符串
  let message = `Hello, my name is ${name2} and I am ${age} years old.`;
  console.log(message);
</script>

<script>
  let str = "hello world";

  console.log(str.charAt(1));
  console.log(str.charAt(-1));  //“”
  console.log(str.charAt(100)); //“”

  console.log(str.at(1));
  console.log(str.at(-1));
  console.log(str.at(100)); //undefined
</script>

<script>
  console.log(1, 2, 3);
</script>

<script>
  let propKey = 'itbaizhan';

  let obj = {
    [propKey]: true,
    ['a' + 'bc']: 123
  };
  console.log(obj);
</script>

<script>
  let z = {a: 3, b: 4};
  let n = {...z, c: 5};
  console.log(n);
</script>

<script>
  var mySet = new Set();
  mySet.add("5")
  mySet.clear();
  console.log(mySet);
</script>

<script>
  let myPromise = new Promise(function (resolve, reject) {
    // 模拟异步操作
    setTimeout(function () {
      let randomNumber = Math.random();
      if (randomNumber > 0.5) {
        resolve(randomNumber); // 成功，将随机数传递给 resolve 函数
      } else {
        reject('Error: Random number is less than 0.5'); // 失败，将错误信息传递给 reject 函数
      }
    }, 1000);
  });

  // 添加成功和失败的回调函数
  myPromise.then(function (result) {
    console.log('Success:', result);
  }).catch(function (error) {
    console.log('Error:', error);
  }).finally(function () {
    console.log('Promise finished'); // 不管 Promise 状态如何，都会执行
  });
</script>

<script>
  function timeout(ms) {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  }

  async function asyncPrint(value, ms) {
    await timeout(ms);
    console.log(value);
  }

  asyncPrint('hello world', 50);
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--分开是为了:先加载 jQuery 库，然后执行你的 JavaScript 代码。-->
<script>
  function ajax(url) {
    return new Promise(function (resolve, reject) {
      $.getJSON(url)
        .done(function (result) {
          console.log('success');
          resolve(result);
        })
        .fail(function (error) {
          console.log(error);
          reject(error);
        });
    })
  }

  async function getInfo() {
    let ids = await ajax("http://iwenwiki.com/api/generator/list.php")
    let names = await ajax("http://iwenwiki.com/api/generator/id.php?id=" + ids[0])
    let infos = await ajax("http://iwenwiki.com/api/generator/name.php?name=" + names.name)
    console.log('infos', infos);

    //由于浏览器的安全策略，通常不允许在前端 JavaScript 中直接从不同源加载数据。这种安全机制称为同源策略（Same-Origin Policy）。
    //因此，如果你尝试从不同源（比如从 http://www.baidu.com）加载数据，可能会遇到跨域请求被阻止的问题。
    //为了解决跨域请求问题，通常需要在服务器端设置相应的 CORS（跨域资源共享）头部。但如果目标服务器没有配置 CORS，前端 JavaScript 无法直接从该服务器加载数据。
    let baidu = await ajax("https://www.baidu.com");
    console.log('baidu', baidu);
  }

  getInfo();
</script>


<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
  window.ga = function () {
    ga.q.push(arguments)
  };
  ga.q = [];
  ga.l = +new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('set', 'transport', 'beacon');
  ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>