CSS3，js小总_css3+js选项卡-CSDN博客

本文链接：https://blog.csdn.net/weixin_63967970/article/details/125903673

今天总算是结束前端的全部内容了，虽然比算法简单了些，但是还是掉了好多头发。。。有些操作跟java和qt的一些内容很像，CSS3还是挺容易上手的，主要就是记忆，但是js相对要难一些。简单记录几个题目。

**js实现简易计算器**：
**js实现简易跳转操作**
**js实现问卷形式（全选，全不选，根据输入的序号选）**
**js实现插入结点操作（前后）**
**js实现删除结点（反向删除）**
**js实现替换元素结点**
**用js制作一个表格，显示班级信息（超难！）**
**综合运用html5，CSS3，js实现选项卡切换功能（超级难！）**

js实现简易计算器：

parseInt()返回整数，这个函数常用！！

<!DOCTYPE html>
<html>
<head>
    <title> 事件</title>
    <script type="text/javascript">
        function count() {
            var v1 = parseInt(document.getElementById("txt1").value);
            var v2 = parseInt(document.getElementById("txt2").value);
            var v3 = document.getElementById("select").value;
            var result = "";
            switch (v3) {
                case "+":
                    result = v1 + v2;
                    break;
                case "-":
                    result = v1 - v2;
                    break;
                case"*":
                    result = v1 * v2;
                    break;
                case"/":
                    result = v1 / v2;
                    break;
                default:
                    break;
            }
         
            document.getElementById("fruit").value = result;
        }
    </script>
</head>
<body>
<input type='text' id='txt1'/>
<select id='select' >
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type='text' id='txt2'/>
<input type='button' value=' = ' onclick="count()"/> 
</body>
</html>

js实现简易跳转操作

本来挺简单的一个题，硬是整了好几个小时，其实就是js代码的放置问题，记得放在下面就可以避免很多问题了。

<!DOCTYPE html>
<html>
<head>
    <title>浏览器对象</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

</head>
<body>
<!--先编写好网页布局-->
<p>操作成功</p>
<br>
<span id="time">5</span>
  <span>秒后回到主页</span>
   <a  href="" onclick="window.history.back()">返回</a>
<script type="text/javascript">
    var time=document.getElementById("time");
    function count(){

        if(time.innerHTML==0){
            window.location.replace("http://www.baidu.com");
            // window.location.href="http://www.baidu.com";
        }
        else{
            time.innerHTML--;

        }
    }
    window.setInterval("count()",1000);


</script>
</body>
</html>

js实现问卷形式（全选，全不选，根据输入的序号选）

自己在原来答案的基础上升级了一下，标准答案只能根据输入的一个序号来选中指定的选项，自己结合之前的一些语法，又修改成了可以输入任意序号来选中多个选项，感觉挺有成就感！

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
</head>

<body>
<form>
    请选择你爱好:<br>
    <input type="checkbox" name="hobby" id="hobby1">  音乐
    <input type="checkbox" name="hobby" id="hobby2">  登山
    <input type="checkbox" name="hobby" id="hobby3">  游泳
    <input type="checkbox" name="hobby" id="hobby4">  阅读
    <input type="checkbox" name="hobby" id="hobby5">  打球
    <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
    <input type="button" value = "全选" onclick = "checkall();">
    <input type="button" value = "全不选" onclick = "clearall();">
    <p>请输入您要选择爱好的序号，序号为1-6:</p>
    <input id="wb" name="wb" type="text" >
    <input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
    function checkall(){
        var hobby = document.getElementsByTagName("input");
        for(var i=0;i<hobby.length;i++){
            if(hobby[i].type=="checkbox"){
                hobby[i].checked=true;
            }
        }

    }
    function clearall(){
        var hobby = document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++){
            hobby[i].checked=false;
        }

    }
   //创新点！！！
    function checkone(){
        var j=document.getElementById("wb").value;
        var myarr=new Array();
        myarr=j.split("");
        //document.write(j.split("")+"<br>");
        for(var i=0;i<myarr.length;i++){
            var v=parseInt(myarr[i]);
            var hobby=document.getElementById("hobby"+v);
            hobby.checked=true;
        }


    }

</script>
</body>
</html>

js实现插入结点操作（前后）

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title>
</head>
<body>

<ul id="test"><li>JavaScript</li><li>HTML</li></ul>

<script type="text/javascript">

  var otest = document.getElementById("test");
  var newnode=document.createElement("li");
  var node=document.getElementById("test").childNodes[0];
  newnode.innerHTML="php";
  otest.insertBefore(newnode,node);

  var v=document.getElementById("test").innerHTML;
  document.write(v);


</script>

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title>
</head>
<body>

<ul id="test">
  <li>JavaScript</li>
  <li>HTML</li>
</ul>

<script type="text/javascript">

  var otest = document.getElementById("test");
  var newnode=document.createElement("li");
  //var newtext=document.createTextNode("PHP");//这个方法也行！
  newnode.innerHTML="PHP";
  otest.appendChild(newnode);

  var v=document.getElementById("test");
  document.write(v.innerHTML);
</script>

</body>
</html>

js实现删除结点（反向删除）

注意循环的时候要反向删除，因为数组长度在不断变化，反向可以一次性全部删除。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
  function clearText() {
    var content=document.getElementById("content");
    for(var i=content.childNodes.length-1;i>=0;i--){
      var v=content.childNodes[i];
      content.removeChild(v);
    }

  }
</script>

<button onclick="clearText()">清除节点内容</button>



</body>
</html>

js实现替换元素结点

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body><div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div><a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

<script type="text/javascript">
    function replaceMessage(){
        var newnode=document.createElement("i");
        var oldnode=document.getElementById("oldnode");
        oldnode.parentNode.replaceChild(newnode,oldnode);
        var oldHTML=oldnode.innerHTML;
        newnode.innerHTML=oldHTML;

    }
    document.write(document.getElementsByTagName("body")[0].childNodes[0].childNodes[0].nodeName);
</script>

</body>
</html>

用js制作一个表格，显示班级信息（超难！）

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript">

        window.onload = function () {
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            changeColor();
        }
        function changeColor(){
            var trs=document.getElementsByTagName("tr");
            for(var i=1;i<trs.length;i++){
                trs[i].setAttribute("onmouseover","addColor(this)");
                trs[i].setAttribute("onmouseout","deleteColor(this)");
            }
        }
        function addColor(obj){
            obj.style.background="pink";
        }
        function deleteColor(obj){
            obj.style.background="white";
        }

        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        function addRow(){
            var id=prompt("请输入学号：");
            var name=prompt("请输入姓名：");
            var tr=document.createElement("tr");

            var t_id=document.createElement("td");
            t_in.innerHTML=id;

            var t_name=document.createElement("td");
            t_name.innerHTML=name;

            //给删除按钮赋予对应属性
            var td_delete=document.createElement("td");
            var a=document.createElement("a");
            a.setAttribute("href","javascript:;");
            a.setAttribute("onclick","deleteRow(this)");
            a.innerHTML="删除";
            td_delete.appendChild(a);

            //td元素加入到tr元素中
            tr.append(t_id,t_name,td_delete);
            
            //将刚创建好的孩子结点加入到最后边
            document.getElementsByTagName("table")[0].appendChild(tr);
            
            //改变颜色
            changeColor();
            
        }
        
        // 创建删除函数
        function deleteRow(obj) {
            obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
        }
        
    </script>
</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick=" deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;"onclick=" deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

</table>
<input type="button" value="添加一行"onclick="addRow()"/>   <!--在添加按钮上添加点击事件  -->
</body>
</html>

综合运用html5，CSS3，js实现选项卡切换功能（超级难！）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        * {
            margin: 0;
            padding: 0;
            font: normal 12px "微软雅黑";
            color: #000000;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }

        #tab-list {
            width: 275px;
            height: 190px;
            margin: 20px auto;
        }

        #ul1 {
            border-bottom: 2px solid #8B4513;
            height: 32px;
        }

        #ul1 li {
            display: inline-block;
            width: 60px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #999;
            border-bottom: none;
            margin-left: 5px;
        }

        #ul1 li:hover {
            cursor: pointer;
        }

        #ul1 li.active {
            border-top: 2px solid #8B4513;
            border-bottom: 2px solid #FFFFFF;
        }

        #tab-list div {
            border: 1px solid #7396B8;
            border-top: none;
        }

        #tab-list div li {
            height: 30px;
            line-height: 30px;
            text-indent: 8px;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }
    </style>


</head>
<body>

<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>

<!-- js代码 -->
<script type="text/javascript">

    window.onload = function () {
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function () {
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for (var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }
        }
    }


</script>
</body>
</html>