当前位置：网站首页>Navigation bar switching, message board, text box losing focus

Navigation bar switching, message board, text box losing focus

2022-06-21 13:25:00 【zhangsan3333】

learn HTML Just look at this article （HTML Detailed explanation ）

Web Message board

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> Simple Web Message book </h1>
<textarea id="memo" cols="60" rows="6"></textarea><br />
<input type="button" value=" Add a message " onclick="saveStorage('memo');" />
<input type="button" value=" Empty data " onclick="clearStorage();" />
<input type="button" value=" Clear the last data " onclick="clearsingleStorage();" />
<hr />
<p id="msg"></p>
<script type="text/javascript"> //savaStorage Is a new message function  function saveStorage(id) {
       // obtain textarea Of value value  var data = document.getElementById(id).value; // Get the current time  var time = new Date().toUTCString(); // Take the current time as the key name ,textarea Of value value （ That is, the value entered by the user ） As the key value  localStorage.setItem(time, data); // Show comments  showMsg("msg"); } //showMsg Is a function that displays messages  function showMsg(id) {
       var result = '<table border="1">'; // Traverse locally stored data  for (var i = 0; i < localStorage.length; i++) {
       // obtain key value  var key = localStorage.key(i); // obtain value value  var value = localStorage.getItem(key); // Display the data  result += "<tr><td>" + value + "</td><td>" + key + "</td></tr>"; } result += "</table>"; var target = document.getElementById(id); target.innerHTML = result; } // Show comments  showMsg("msg"); //clearStorage Is a function to empty messages  function clearStorage() {
       // Empty data  localStorage.clear(); // Show comments  showMsg("msg"); } //clearsingleStorage Is a function to delete a single data  function clearsingleStorage() {
       localStorage.removeItem(localStorage.key(localStorage.length - 1)); // Show comments  showMsg("msg"); } </script>
</body>

</html>

Insert picture description here
JS Learning notes （JavaScript Essential for basic learning ）

Navigation bar style switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style> #list li {
       list-style-type: none; width: 100px; height: 50px; line-height: 50px; background-color: beige; text-align: center; float: left; } #list li.current {
       background-color: red; } #list li a {
       text-decoration: none; } </style>
</head>

<body>
<div id="menu">
    <ul id="list">
        <li class="current">
            <a href="javascript:void(0)"> home page </a>
        </li>
        <li>
            <a href="javascript:void(0)">HTML</a>
        </li>
        <li>
            <a href="javascript:void(0)">CSS</a>
        </li>
        <li>
            <a href="javascript:void(0)">JavaScript</a>
        </li>
        <li>
            <a href="javascript:void(0)"> About </a>
        </li>
        <li>
            <a href="javascript:void(0)"> help </a>
        </li>
    </ul>
</div>

<script> //  Get all  li  label  var liObjs = document.getElementById("list").getElementsByTagName("li"); //  Loop traversal , Find each  li  Medium  a, Register click events  for (var i = 0; i < liObjs.length; i++) {
       //  Every  li  Medium  a var aObj = liObjs[i].firstElementChild; aObj.onclick = function () {
       //  Put this  a  Where  li  The class styles of all sibling elements of the are removed  for (var j = 0; j < liObjs.length; j++) {
       liObjs[j].removeAttribute("class"); } // Currently clicked  a  Parent element of  li( Click this  a  The parent element  li), Set the background color  this.parentNode.className = "current"; }; } </script>
</body>
</html>

Insert picture description here
jQuery For forms 、 Table operation （ Walk by and have a look ）

The text box loses focus

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css"> body {
       font: normal 12px/17px Arial; } div {
       padding: 2px; } input, textarea {
       width: 12em; border: 1px solid #888; } input:focus, textarea:focus {
       border: 1px solid #f00; background: #fcc; } </style>
</head>
<body>
<form action="" method="post" id="regForm">
    <fieldset>
        <legend> Basic personal information </legend>
        <div>
            <label for="username"> name :</label>
            <input id="username" type="text" />
        </div>
        <div>
            <label for="pass"> password :</label>
            <input id="pass" type="password" />
        </div>
        <div>
            <label for="msg"> Details :</label>
            <textarea id="msg" rows="2" cols="20"></textarea>
        </div>
    </fieldset>
</form>
</body>
</html>