zoukankan html css js c++ java

前端小例子基础js css html练习

前情提要:

　　学前端也有一阵了,个人感觉前端还是重要的.

　　html 学习教程

https://www.cnblogs.com/baili-luoyun/p/10466040.html

　　css 教程

　　js 教程

https://www.cnblogs.com/baili-luoyun/p/10453714.html

　　本次主要是分享几个综合小例子

案例一:

　　js的事件交互

　　知识点:

　　代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js </title>
    <script>
        function cherkname(username) {
            if (username==''){
                alert("用户名不能为空")

            }
        }
    </script>
</head>
<body onload="alert('页面全部加载完成')">
    用户名:<input type="text" value="小宝" onfocus="this.value=''" onblur="cherkname(this.value)">
</body>
</html>

案例二:

利用math 对象选择循环等进行判断数字

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">

    <title>猜数字游戏</title>

    <style>
        html {
            font-family: sans-serif
        }

        body {
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto
        }

        .lastResult {
            color: white;
            padding: 3px
        }
    </style>
</head>

<body>
<h1>猜数字游戏</h1>

<p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>

<div class="form">
    <label for="guessField">请猜数: </label>
    <input type="text" id="guessField" class="guessField">
    <input type="submit" value="确定" class="guessSubmit">
</div>

<div class="resultParas">
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
</div>

<script>
    // 开始编写 JavaScript 代码
    let randomNumber = Math.floor(Math.random() * 100) + 1;

    const guesses = document.querySelector('.guesses');
    const lastResult = document.querySelector('.lastResult');
    const lowOrHi = document.querySelector('.lowOrHi');

    const guessSubmit = document.querySelector('.guessSubmit');
    const guessField = document.querySelector('.guessField');

    let guessCount = 1;
    let resetButton;

    function checkGuess() {
        let userGuess = Number(guessField.value);
        if (guessCount === 1) {
            guesses.textContent = '上次猜的数：';
        }
        guesses.textContent += userGuess + ' ';

        if (userGuess === randomNumber) {
            lastResult.textContent = '恭喜你！猜对了';
            lastResult.style.backgroundColor = 'green';
            lowOrHi.textContent = '';
            setGameOver();
        } else if (guessCount === 10) {
            lastResult.textContent = '!!!GAME OVER!!!';
            setGameOver();
        } else {
            lastResult.textContent = '你猜错了！';
            lastResult.style.backgroundColor = 'red';
            if (userGuess < randomNumber) {
                lowOrHi.textContent = '你猜低了！';
            } else if (userGuess > randomNumber) {
                lowOrHi.textContent = '你猜高了';
            }
        }

        guessCount++;
        guessField.value = '';
        guessField.focus();
    }

    guessSubmit.addEventListener('click', checkGuess);

    function setGameOver() {
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement('button');
        resetButton.textContent = '开始新游戏';
        document.body.appendChild(resetButton);
        resetButton.addEventListener('click', resetGame);
    }
    function resetGame() {
  guessCount = 1;

  const resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}
</script>
</body>
</html>

案例三:

创建按钮切换图片

知识点数组自增加

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            let img1 = document.getElementsByTagName("img")[0];
            let left = document.getElementById("bt1");
            let right = document.getElementById("bt2");
            let num = 0;
            let arrimg = ["image/1.jpg", "image/2.jpg"
                , "image/3.jpg", "image/4.jpg", "image/5.jpg"];
            let text = document.getElementById("ye");
            text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";

            function left1() {
                num--;


                if (num < 1) {
                    num = 0;
                }
                img1.src = arrimg[num];
                text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";
            }

            function right1() {

                num++;


                if (num == arrimg.length) {
                    num = 0
                }
                img1.src = arrimg[num];
                text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";
            }

            left.onclick = function () {
                left1()
            };
            right.onclick = function () {
                right1()
            }

        }
    </script>
    <style>
        .dd1 {
            width: 500px;
            height: 500px;
            text-align: center;
            background-color: #00c4ff;
            margin: 30px auto;
        }

        img {
            width: 400px;
            height: 400px;
        }

        #an {
            margin-top: 20px;
        }

        .bt {
            padding: 20px;
            margin-left: 10px;

        }

    </style>
</head>

<body>
<div class="dd1">
    <div id="t1">
        <img src="image/1.jpg">

    </div>
    <div id="an">
        <span id="ye">图片1</span>
        <button class="bt" id="bt1">上一页</button>
        <button class="bt" id="bt2">下一页</button>
    </div>
</div>
</body>
</html>

案例四

商城选择,全选,复选,反选,提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {


            qx.onclick =function () {
                   let qx =document.getElementById("qx").checked;
                    let cdnodes =document.getElementsByTagName("input");
            for (let i=1;i<cdnodes.length;i++){
                cdnodes[i].checked =qx;
            }
            }
            // let dn =document.getElementById("dn");
            // let sj =document.getElementById("sj");
            // let wj =document.getElementById("wj");

        }
    </script>
    <script>
        function yz() {


        let cdnodes =document.getElementsByTagName("input");
           for (let i=1;i<cdnodes.length;i++){
                if (cdnodes[i].checked==""){
                    let stase =window.confirm("确定不购买东西");

                return stase
                }

            }
                }
        let te1= document.getElementsByClassName("te1");
        for (let i =1;i<te1.length;i++){
            te1[i].title ="请输入数量";
            te1[i].placeholder="请输入数量"
        }

    </script>
    <style>
        .dd1 {
            background-color: #00c4ff;
            text-align: center;
            /*margin: 100px auto;*/
            /* 500px;*/
            height: 400px;
        }

        .tt1 {
            font-size: 30px;
            line-height: 60px;
            margin: auto;
            border-spacing: 0px ;
            width: 700px;
            border: 1px solid red;

        }



        .th1 {
            margin-left: 40px;
                     border: 1px solid black;

            line-height: 60px;

        }
        .xzk{
            margin-top: 13px;
            width: 20px;
            height: 20px;
        }
        .tijiao{
            font-size: 30px ;
        }
        .te1{
            line-height: 30px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<form action="http://www.baidu.com" method="get" onsubmit="return yz()">
<div class="dd1">
    <table class="tt1">
        <tr class="tr1">
            <th class="th1"><input type="checkbox" id="qx" class="xzk" /></th>
            <th class="th1">商品名称</th>
            <th class="th1">商品价格</th>
            <th class="th1">商品库存</th>
            <th class="th1">购买数量</th>
        </tr>
        <tr class="tr1">
            <td class="th1"><input type="checkbox" id="dn" class="xzk" name="dn"/></td>
            <td class="th1">电脑</td>
            <td class="th1">100</td>
            <td class="th1">200</td>
            <td class="th1"><input type="text" name="dn" class="te1"></td>
        </tr>
        <tr class="tr1">
            <td class="th1"><input type="checkbox" id="sj" class="xzk" name="sj"></td>
            <td class="th1">手机</td>
            <td class="th1">200</td>
            <td class="th1">100</td>
                        <td class="th1"><input type="text" name="sj" class="te1"></td>

        </tr>
        <tr>
            <td class="th1"><input type="checkbox" id="wj" class="xzk" name="wj"></td>
            <td class="th1">玩具</td>
            <td class="th1">400</td>
            <td class="th1">500</td>
                        <td class="th1"><input type="text" name="wj" class="te1" placeholder="请输入数量"></td>

        </tr>

    </table>
    <hr>

    <input type="submit" value="提交" class="tijiao">
    <p>您购买的东西是</p>
    <p id ="gmsp"></p>
</div>
</form>
</body>
</html>

案例五:

显示当前时间

知识点:主要是date 对象和for 循环的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
window.onload =function () {
    let p1 = document.getElementById("p1"); //获取p1 dom
    let kwhite = "ss";  //增加空白
    for (let i = 0; i < 5; i++) {    //循环3次
        nums1 = Math.floor(Math.random() * 10);    //生成随机数向下取整
        kwhite+=nums1
    }

    p1.innerText = kwhite

}
</script>
<style>
    /*.a1{*/
        /*background-color: orange;*/
        /* 500px;*/
        /*height: 300px;*/
        /*margin: 0px auto;*/
    /*}*/
    .a2{
        background-color: palegreen;
        width: 700px;
        height: 300px;
        margin: 0px auto;
    }
    .p1{
        margin: auto;
        line-height: 240px;
        font-size: 50px;
        text-align: center;
        padding: 30px;
        border: 1px solid red;
    }
</style>
</head>
<body>
   <div class="a1">

   </div>
   <hr>
<div class="a2">
<p class="p1" id="p1"></p>
</div>
</body>
</html>

案例六:

时间案例升级

主要是增加删除节点,增加节点的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {

            let texid;//这是定时器id
            let nun = 1;

            function gettime() {
                let p_time = document.getElementById("now_time");

                let time1 = new Date();
                let now_time = time1.toLocaleString();
                p_time.innerHTML = now_time;
                return now_time
            }

            let start_time = document.getElementById("start-time");
            let stop_time = document.getElementById("stop-time");
            let nums1 = document.getElementById("nums"); //2


            function starts1() {
                if (texid == null) {
                    gettime();
                    texid = setInterval(gettime, 1000)
                }
                let num_p = document.createElement("p");
                num_p.innerHTML = nun;
                nun++;
                num_p.setAttribute("class", "sty1");
                nums1.appendChild(num_p);

                let str_p = document.createElement("p");



                str_p.innerHTML = gettime();

                start_time.appendChild(str_p);

                str_p.setAttribute("class", "sty1");

            }

            function stops1() {
                clearInterval(texid);
                texid = null;
                let sto_p = document.createElement("p");
                sto_p.innerHTML = gettime();
                sto_p.setAttribute("class", "sty1");
                stop_time.appendChild(sto_p);

                sto_p.innerHTML = gettime()

            }


            let bgh = document.getElementById("bg");
            let clears = document.getElementById("clear");
            clears.onclick = function () {
                nun = 1;
                bgh.removeChild(nums1); //2
                                nums1 = document.createElement("td");
                                                nums1.setAttribute("class", "nums");
                                                                bgh.appendChild(nums1);



                bgh.removeChild(start_time);
                                start_time = document.createElement("td");
                                                start_time.setAttribute("class","start-time");
                                                                bgh.appendChild(start_time);



                bgh.removeChild(stop_time);
                                stop_time = document.createElement("td");
                                                stop_time.setAttribute("class","stop-time");
                                                                bgh.appendChild(stop_time);


            };

            let sta1 = document.getElementById("start");
            sta1.onclick = function () {
                starts1()
            };
            let stp1 = document.getElementById("stop");
            stp1.onclick = function () {
                stops1()
            }

        }
    </script>
    <style>
        .kezi {
            width: 350px;
            height: 500px;
            border: 1px solid red;
            background-color: orange;
            float: left;
        }

        .show-time {
            width: 900px;
            height: 500px;
            border: 1px solid green;
            background-color: #06b6ef;
            float: left;
        }

        .t1 {
            width: 900px;
            height: 500px;
        }

        .thh {
            height: 30px;
        }

        #now_time {
            height: 50px;
            color: gold;
            font-size: 50px;
            font-weight: bolder;
            text-align: center;
        }

        #start {
            margin-top: 50px;
            height: 100px;
            width: 100px;
            margin-left: 50px;
            font-size: 30px;
        }

        #stop {
            margin-top: 50px;
            height: 100px;
            width: 100px;
            margin-left: 13px;
            font-size: 30px;
        }

        #clear {
            margin-top: 30px;
            height: 100px;
            width: 200px;
            margin-left: 60px;
            font-size: 30px;
        }

        .sty1 {
            font-size: 30px;
            color: red;
        }

        #start-time {
            width: 350px;
        }

        #stop-time {
            width: 350px;
        }

        #nums {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="kezi">
    <div class="show-class">
        <p id="now_time">00:00:00</p>
        <button id="start">开始</button>
        <button id="stop">结束</button>
        <br>
        <button id="clear">清空</button>
    </div>
</div>
<div class="show-time">
    <table border="1" class="t1">
        <tr>
            <th class="nums">次数</th>
            <th class="thh">start-time</th>
            <th class="thh">stop-time</th>
        </tr>
        <tr id="bg">
            <td id="nums"></td>
            <td id="start-time"></td>
            <td id="stop-time"></td>
        </tr>
    </table>
</div>
</body>
</html>

案例七:

生成4位随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
window.onload =function () {
    let p1 = document.getElementById("p1"); //获取p1 dom
    let kwhite = "ss";  //增加空白
    for (let i = 0; i < 5; i++) {    //循环3次
        nums1 = Math.floor(Math.random() * 10);    //生成随机数向下取整
        kwhite+=nums1
    }

    p1.innerText = kwhite

}
</script>
<style>
    /*.a1{*/
        /*background-color: orange;*/
        /* 500px;*/
        /*height: 300px;*/
        /*margin: 0px auto;*/
    /*}*/
    .a2{
        background-color: palegreen;
        width: 700px;
        height: 300px;
        margin: 0px auto;
    }
    .p1{
        margin: auto;
        line-height: 240px;
        font-size: 50px;
        text-align: center;
        padding: 30px;
        border: 1px solid red;
    }
</style>
</head>
<body>
   <div class="a1">

   </div>
   <hr>
<div class="a2">
<p class="p1" id="p1"></p>
</div>
</body>
</html>

案例八:

注册界面

节点的增加删除,.css 界面的显示等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .header{
            background-color: #06b6ef;
            height: 100px;
        }
        .bt1{
            line-height: 70px;
            margin-top: 10px;
            width: 500px;
            font-size: 30px;
            /*height: 200px;*/
        }
        .mod{
            /*background-color: orange;*/
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            margin-top: 5px;
            padding: 10px;


        }
        .dxck{
            padding: 10px;
            width: 300px;
            color: ghostwhite;
        }
        .sc{
            line-height: 100%   ;
            height: 30px;
            width: 100px;
            margin-left: 100px;
        }
        .hide{
            display: none;
        }
        #show_msg{
            height: 350px;
            background-color: pink;
            position: fixed;
        }
        .xbnr{
            line-height: 100px;
            font-size: 80px;
        }
        input{
            font-size: 80px;
        }
        .close1{
            margin-left: 900px;
            font-size: 25px;

        }
        body{
            height: 1500px;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="header" id="header">
    <button class="bt1">增加个人信息</button>
</div>
<div class="mod" id="mod">
<table border="1">
    <tbody class="msg1" id="msg1">
    <tr>
    <th class="dxck">姓名</th>
    <th class="dxck">年龄</th>
    <th class="dxck">专业</th>
    <th class="dxck"></th>
</tr>
    <tr>
    <td class="dxck">王</td>
    <td class="dxck">18</td>
    <td class="dxck">计算机</td>
        <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>
    </tr>
    <tr>
    <td class="dxck">王2</td>
    <td class="dxck">181</td>
    <td class="dxck">计算机1</td>
        <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>
    </tr>
    </tbody>
</table>
</div>
<div class="show_msg hide" id="show_msg">
    <span class="xbnr">姓名:</span><input id="name" type="text" title="请输入姓名" placeholder="请输入姓名" ><br>
    <span class="xbnr">年龄:</span><input id="age" type="text" title="请输入age" placeholder="请输入age"><br>
    <span class="xbnr">专业:</span><input id="hobby" type="text" title="请输入专业" placeholder="请输入专业" ><br>
    <button class="close1" id="close1">保存</button>
</div>
</body>
    <script>

                    let bt1 =document.getElementsByClassName("bt1")[0];  //加入信息按钮
                    let show_msg =document.getElementById("show_msg"); //加入内容界面
                    let close1 =document.getElementById("close1");  //关闭加入内容界面
                    let name =document.getElementById("name");  //名字
                    let age =document.getElementById("age");  //年龄
                    let hobby =document.getElementById("hobby"); //专业
                    let msg1  =document.getElementById("msg1") ;//获取展示内容父标签
            bt1.onclick =function () {
                show_msg.classList.remove("hide")
            };
            close1.onclick =function () {
              show_msg.classList.add("hide");
                namemsg= name.value;
                agemsg =age.value;
                hobbymsg =hobby.value;
            let creatbody =document.createElement("tr");  //创建tr
            let creatname =document.createElement("td");  //创建td
            creatname.setAttribute("class","dxck");    //赋值css
            creatname.innerHTML=namemsg;   //给td 赋name value
            let creatage =document.createElement("td");   //创建td
            creatage.setAttribute("class","dxck");
            creatage.innerHTML=agemsg;    //赋值
            let creathobby =document.createElement("td");  //创建td
            creathobby.setAttribute("class","dxck");
            creathobby.innerHTML=hobbymsg;
            let creatclear =document.createElement("td");  //创建td
            creatclear.setAttribute("class","dxck");
            // creatclear.innerHTML="<button class="sc" onclick="delnode(this)">删除</button>"
            let iupdel =document.createElement("button");  //创建button
            iupdel.setAttribute("class","sc");
            iupdel.setAttribute("onclick","delnode(this)");
            iupdel.innerHTML="删除";

            msg1.appendChild(creatbody);     //在msg1 下增加tr标签
            creatbody.appendChild(creatname); //在tr 标签下增加td
            creatbody.appendChild(creatage);   //
            creatbody.appendChild(creathobby);  //
            creatbody.appendChild(creatclear); //
            creatclear.appendChild(iupdel); //在td 标签内增加button
            };
 //             let scmsg =document.getElementsByClassName("sc");     ///待解决
 //             for(let i=0;i>scmsg.length;i++){
 //
 //             scmsg[i].onclick =function () {
 //                     alert("zhans")
 //                 }
 // }
            function delnode(inputNode) {
                let trNode = inputNode.parentNode.parentNode;
                let tbody =document.getElementsByTagName("tbody")[0];
                tbody.removeChild(trNode)
            }


    </script>
</html>

查看全文

相关阅读:
GitHub Interesting Collection
使用 CSS3 Flexible Boxes 布局
 消失的属性
 浅谈 JavaScript 模块化编程
 为你的 Javascript 加点咖喱
 软件测试
 osi七层模型
 3_Hydra（爆破神器）
2_NC（瑞士军刀）
1_HTTP协议详解

原文地址：https://www.cnblogs.com/baili-luoyun/p/10466015.html

前端小例子 基础js css html练习

前端小例子基础js css html练习