初识JavaScript

最新推荐文章于 2020-09-23 04:52:01 发布

青雾山河

最新推荐文章于 2020-09-23 04:52:01 发布

阅读量153

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_40969422/article/details/88971232

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一个原生JavaScript CSS DEMO

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./index.css">
  <title>任务列表</title>
</head>

<body>
  <div id="container">
    <header id="top" class="top">
      <h1>任务列表</h1>
      <p>新任务</p>
      <input type="text" id='task' name='task' placeholder="遛狗..."><br><br>
      <button onclick='addtask()'>添加任务</button>
    </header>
    <main class='content'>
      <h1 id='task-title'>任务清单</h1>
      <ul id="ul-d">
        <li>学习HTML<span onclick='del(this)'>x</span></li>
        <li>学习CSS<span onclick='del(this)'>x</span></li>
        <li>学习JavaScript<span onclick='del(this)'>x</span></li>
        <li>学习VUE<span onclick='del(this)'>x</span></li>
        <li>学习SASS<span onclick='del(this)'>x</span></li>
      </ul>
      <a href="javascript:void(0)" onclick="clearAll(this)" class="clearAll">清除任务</a>
    </main>
    <footer>
      <h1>Copyright &copy;2019</h1>
    </footer>
  </div>

  <script src="./index.js"></script>
</body>

</html>

/* index.js */
var liCount = document.getElementsByTagName('li').length;

function showOrHied(liCount) {
  if (liCount > 0) {
    document.querySelector('.clearAll').style.display = '';
    document.querySelector('#task-title').style.display = '';
  } else {
    document.querySelector('.clearAll').style.display = 'none';
    document.querySelector('#task-title').style.display = 'none';
  }
}

function addtask() {
  //获取表单中的值
  let dask = document.querySelector('#task').value;
  if (dask == null || dask === undefined || '' == dask) {
    console.warn('dask is not null');
    return;
  }
  //创建元素
  const li = document.createElement('li');

  //添加文本
  li.appendChild(document.createTextNode(dask));

  //创建span标签
  const span = document.createElement('span');
  span.setAttribute('onclick', 'del(this)');
  span.appendChild(document.createTextNode('x'));

  li.appendChild(span);

  //将 li 放入 ul中
  document.querySelector('ul#ul-d').appendChild(li);
  console.log(li);
  document.querySelector('#task').value = '';
  liCount++;
  showOrHied(liCount);
}
function del(event) {
  console.log(event.parentElement);
  event.parentElement.remove();
  liCount--;
  showOrHied(liCount);
}

function clearAll(e) {
  val = document.getElementById('ul-d');
  val.innerHTML = '';
  liCount = 0;
  showOrHied(liCount);
}

/* index.css */

* {
  margin: 0px;
  padding: 0px;
}

#container {
  background: white;
  width: 90vw;
  margin: 0.3rem auto;
  border: 1px solid #eee;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  background: url('https://images.pexels.com/photos/2070241/pexels-photo-2070241.jpeg?cs=srgb&dl=chain-link-fence-fence-growth-2070241.jpg&fm=jpg') no-repeat center center/cover;
}

.top {
  width: 95%;
  margin: 10px auto;
  color: #999999;
}

.top h1 {
  font-size: 20px;
  padding: 10px;
}

.top p {
  font-size: 16px;
  padding: 10px;
}

#task {
  background: rgba(238, 238, 238, 0.7);
  margin-left: 10px;
  width: 90%;
  height: 3rem;
  font-size: 1rem;
  border: none;
}

.top button {
  background: rgba(102, 102, 102, 0.1);
  border: none;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

.top button:hover {
  color: yellowgreen;
  background: gray;
}

.content {
  width: 95%;
  margin-top: 20px;
  margin: 10px auto;
  color: #333;
}

.content h1 {
  font-size: 20px;
  padding: 10px;
  margin-top: 10px;
}

.content ul {
  list-style: none;
  padding: 10px;
}

.content ul li {
  padding: 10px;
  border: solid 1px #ddd;
  height: 2rem;
  line-height: 2rem;
  margin-top: 0.1rem;
}

.content ul li span {
  font-size: 30px;
  margin-right: 2rem;
  color: #FF3399;
  float: right;
}

.clearAll {
  text-decoration: none;
  display: inline-block;
  background: rgba(102, 102, 102, 0.1);
  color: #333;
  border: none;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin: 20px 10px;
}

.clearAll:hover {
  color: yellowgreen;
  background: gray;
}

footer {
  /* background: #EEEEEE; */
  background: rgba(238, 238, 238, 0.7);
  color: #999999;
  width: 95%;
  margin: 1rem auto;
}

footer h1 {
  font-size: 1rem;
  padding: 1rem;
  margin: auto;
  text-align: center;
}

青雾山河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识JavaScript

一个原生JavaScript CSS DEMO<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
复制链接

扫一扫

专栏目录