使用JavaScript和jQuery的内容，自行设计页面，至少包含8个常见案例（例如：登录验证、网页开关灯、轮播图、倒计时、显示机器时间、动画效果

很抱歉，作为一个AI语言模型，我无法演示页面设计。但我可以给你一些常见案例的示例代码，希望对你有所帮助。

1. 登录验证

HTML代码：

<form id="login-form">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="登录">
</form>

JavaScript代码：

$(document).ready(function() {
  $("#login-form").submit(function(event) {
    event.preventDefault();
    var username = $("#username").val();
    var password = $("#password").val();
    // 在这里进行登录验证
  });
});

2. 网页开关灯

HTML代码：

<button id="light-button">开灯</button>

JavaScript代码：

$(document).ready(function() {
  $("#light-button").click(function() {
    $("body").toggleClass("dark-mode");
  });
});

CSS代码：

body {
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

3. 轮播图

HTML代码：

<div id="carousel">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

JavaScript代码：

$(document).ready(function() {
  $("#carousel").slick({
    autoplay: true,
    arrows: false,
    dots: true
  });
});

4. 倒计时

HTML代码：

<div id="countdown"></div>

JavaScript代码：

$(document).ready(function() {
  var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
  var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    $("#countdown").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
    if (distance < 0) {
      clearInterval(x);
      $("#countdown").html("EXPIRED");
    }
  }, 1000);
});

5. 显示机器时间

HTML代码：

<div id="machine-time"></div>

JavaScript代码：

$(document).ready(function() {
  setInterval(function() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    $("#machine-time").html(hours + ":" + minutes + ":" + seconds);
  }, 1000);
});

6. 动画效果

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript代码：

$(document).ready(function() {
  $("#box").click(function() {
    $(this).animate({
      width: "200px",
      height: "200px",
      backgroundColor: "blue"
    }, 1000);
  });
});

7. Ajax异步请求数据

HTML代码：

<div id="result"></div>

JavaScript代码：

$(document).ready(function() {
  $.ajax({
    url: "data.json",
    dataType: "json",
    success: function(data) {
      $("#result").html("<h1>" + data.title + "</h1><p>" + data.content + "</p>");
    }
  });
});

8. 列表搜索过滤

HTML代码：

<input type="text" id="search-input">
<ul id="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

JavaScript代码：

$(document).ready(function() {
  $("#search-input").keyup(function() {
    var value = $(this).val().toLowerCase();
    $("#list li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});