A Pen by guihailiuli

Thumbnail
This awesome code was written by guihailiuli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright guihailiuli ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  guihailiuli</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>点击以下按钮给第二个带有class="c1"的p元素添加背景颜色</p>
<button onclick="myFc()">按钮</button>
<div id="myD">
  <p class="c1">div元素中的第一个带有class="c1"的p元素(index 0).</p>
  <p class="c1">div元素中的第二个带有class="c1"的p元素 (index 1).</p>
  <p class="c1">div元素中的第三个带有class="c1"的p元素 (index 2).</p>
</div>
<p><strong>注:</strong>IE8及之前浏览器不支持getElementsByClassName()方法。</p>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/guihailiuli/a-pen-by-guihailiuli-mRRLBg */
div {
    border: 1px solid black;
    margin: 5px;
}

1.  三个问题响应式处理
2.  点击后回到上面,显示下一页题,在一个HTML中通过点击下一步展示下一些题, 当没有做完时候,不能进行下一步
3。 点击一个选项后颜色涂上,离开后颜色不会没有,切换点击后颜色切换涂上
4   上面不同页面选择后,进度条10,20的显示前进进度, 从0开始逐渐增加
5.  点击选项后分值计算,总计。
6.  算出分数,根据分值展示不同人格页面
7   结果页面人格的各项分值进度条形式
8   显示页面下面的著名人物显示轮播图
9   可以前进和后退页面
10   响应式处理

用TypeScript重写JS,  sass重写css

用React重写, webpack css modules

/*Downloaded from https://www.codeseek.co/guihailiuli/a-pen-by-guihailiuli-mRRLBg */
function myFc() {
    var x = document.getElementById("myD");
    x.getElementsByClassName("c1")[1].style.backgroundColor = "red";
}

Comments