一些js功能

留言板

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .box {
                margin: 0 auto;
                width: 800px;
                /* 没有给最大盒子宽度,所以无法居中 */
                /* border: 1px solid #000; 解开查看最大盒子具体*/
            }
            
            .input_bottom {
                display: inline-block;
                position: absolute;
                left: 1050px;
            }
            
            .mark {
                padding-top: 20px;
                padding-bottom: 20px;
                width: 800px;
                height: 100px;
                border-bottom: 1px dashed #ddd;
            }
            
            #input {
                border-radius: 5px;
                height: 100px;
                margin: 0 auto;
                width: 800px;
                text-align: justify;
                overflow: hidden;
                word-wrap: break-word;
                text-justify: inter-ideograph;
            }
            
            .btn {
                background-color: blue;
                color: white;
                width: 60px;
                border: 1px solid blue;
            }
            
            #red {
                color: red;
                float: left;
            }
            
            #time {
                color: gray
            }
            
            .content {
                margin: 30px;
            }
            
            ul li {
                list-style: none;
            }
            
            .delete {
                float: right;
                font-size: 30px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <img src="images/9.6/tip.png"><br>
            <!--<textarea class="input"></textarea>-->
            <input type="text" id="input" value="" onkeydown="countChar('input','red',200);"
onkeyup="countChar('input','red',200);"/>
            <br><br>
            <!--输入下面的文字与发布-->
            <div class="input_bottom">
                <span id="red">0</span>/200
                <button class="btn" style="float: right;">发布</button>
            </div>

            <!--个人评论-->
            <ul>
                <li>

                    <div class="mark">
                        <img src="images/9.5/12.jpg" style="float: left;">
                        <!--头像旁边内容-->
                        <div style="float: left;" class="name">嬴政<br>
                            <span id="time">2022/10/14 12:07</span>
                            <div class="content">content</div>
                        </div>
                        <!--右边删除-->
                        <span class="delete" onclick="myDelete()">x</span>
                    </div>
                </li>
            </ul>

        </div>
        </div>

        <script>
            //1.获取元素
            var inputs = document.getElementById('input');
            var contents = document.querySelector('.content');
            var timer = document.getElementById('time');
            var names = document.getElementById('.name');
            var btn = document.querySelector('button');
            //获取数值
            
            var figure = document.getElementById('red');
            //要放在uls类似数组里
            var uls = document.querySelector('ul');
            //创建一个li 添加节点
            //            var lis = document.createElement('li')
            //这个删除是所有
//            因为删除有bug
            var deletes = document.querySelectorAll('.delete');

            //        window.onload = choosePic();
            //这个是页面加载准备时先加载choosePic()方法
            var myPix = new Array(); 
            choosePic();
    

            function choosePic() { //图片放入数组
                //开始初始化 先把图片路径加入到数组
                for(let i = 0; i < 22; i++) {
                    if(i < 10) {
                        //不知道是不是这个方法,没什么印象了，把数据加入数组
                        myPix.push("images/9.5/0" + (i + 1) + ".jpg");
                    } else {
                        myPix.push("images/9.5/" + (i + 1) + ".jpg"); //这里不需要加0了 因为第十张后面没有开头没有0；
                    }
                }
            }
                    var myName = new Array('张纬祯', '罗南扬', '陈建玟', '侯胜学', '李妙峰', '穆彦君', '杜威柔', '林家皓', '李佩康', '刘怡雨', '潘坚昀', '沈嘉玲', '杨恭乔', '王茹蓁', '许婉婷', '张惠忠', '杨冠廷', '叶彦博', '郑紫智', '刘丽雯', '蔡宁诚', '黄俊毓', '宋浩木', '陈上紫', '周芳富', '杨冠坤');

            let randomPic = () => {
                var randomNum = Math.floor((Math.random() * myPix.length));
                return myPix[randomNum];
            }
            //获取随机名字
            //复制粘贴
            let randomName = () => {
    
                let randomNum = Math.floor((Math.random() * myName.length)); 
                return myName[randomNum]; 
            }

            function getTime() {
                //获取当前时间
                var date = new Date();
                var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
                var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
                var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
                var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
                var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
                var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59) 
                //修改月份格式
                if(month >= 1 && month <= 9) {
                    month = "0" + month;
                }

                //修改日期格式
                if(day >= 0 && day <= 9) {
                    day = "0" + day;
                }

                //修改小时格式
                if(hours >= 0 && hours <= 9) {
                    hours = "0" + hours;
                }

                //修改分钟格式
                if(minutes >= 0 && minutes <= 9) {
                    minutes = "0" + minutes;
                }

                //修改秒格式
                if(seconds >= 0 && seconds <= 9) {
                    seconds = "0" + seconds;
                }

                //获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
                //获取当前系统时间  
                return year + "/" + month + "/" + day + " " + hours + ":" + minutes + ":" + seconds;
            }
            
            var  a= inputs.value;
            
     
          function countChar(inputID,spanID,maxNum)
{
    //得到输入的字符的长度
var NowNum = document.getElementById(inputID).value.length;
//判断输入的长度是否超过规定的长度
if(NowNum>maxNum)
{
   //如果超过就截取规定长度的内容
document.getElementById(inputID).value = document.getElementById(inputID).value.substring(0,maxNum);
}
else
{
    //得到当前的输入长度并且显示在页面上
document.getElementById(spanID).innerHTML = NowNum;
}
}

//得到当前的输入长度并且显示在页面上
function SetLength(inputID,spanID)
{
var NowNum = document.getElementById(inputID).value.length;

document.getElementById(spanID).innerHTML = NowNum;
}

function PageInit()
{
SetLength('txtF_Content','counter');
}
    


            //事件响应
            btn.addEventListener('click', function() {
                if(inputs.value.trim()===''){
                    inputs.value='';
                    red.innerHTML=0;
                    return alert('内容不能为空');
                }
                //获取输入值
                a = inputs.value;
            
                //获取当前时间
                //            getTime();
                //改变内容

                //创建节点
                var lis = document.createElement('li') //
                
                //头像旁边内容
                lis.innerHTML = `<div class="mark">
                
<img src="${randomPic()}" style="float: left;"> 

    <div style="float: left;">${randomName()}<br>
            <span id="time">${getTime()}</span>
            <div class="content">${a}</div>
            </div>
            
            <span class="delete" onclick="myDelete()">x</span>
            </div>`;

                uls.insertBefore(lis, uls.children[0]); //添加节点在最前
            });

            //            deletes.addEventListener('click', function() {
            //                uls.removeChild(uls.children[0]);
            //            })
            let myDelete = () => {
//根据点击事件寻找当前的li所在地 event.target是当前点击的span
    var delLi = event.target.parentNode.parentNode;
//                找当前的父节点 删除
                uls.removeChild(delLi);
            }
            
//            回车发布
            inputs.addEventListener('keyup',function(){
                if(event.key=='Enter'){
                    btn.click();
                }
            });
            
            </script>
    </body>

</html>

倒计时

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .countdown {
                width: 240px;
                height: 305px;
                text-align: center;
                line-height: 1;
                color: #fff;
                background-color: brown;
                /* background-size: 240px; */
                /* float: left; */
                overflow: hidden;
            }
            
            .countdown .next {
                font-size: 16px;
                margin: 25px 0 14px;
            }
            
            .countdown .title {
                font-size: 33px;
            }
            
            .countdown .tips {
                margin-top: 80px;
                font-size: 23px;
            }
            
            .countdown small {
                font-size: 17px;
            }
            
            .countdown .clock {
                width: 142px;
                margin: 18px auto 0;
                overflow: hidden;
            }
            
            .countdown .clock span,
            .countdown .clock i {
                display: block;
                text-align: center;
                line-height: 34px;
                font-size: 23px;
                float: left;
            }
            
            .countdown .clock span {
                width: 34px;
                height: 34px;
                border-radius: 2px;
                background-color: #303430;
            }
            
            .countdown .clock i {
                width: 20px;
                font-style: normal;
            }
        </style>
    </head>

    <body>

        <div class="countdown">
            <p class="next">今天是2022年10月17日</p>
            <p class="title">上课倒计时</p>
            <p class="clock">
                <span id="hour">00</span>
                <i>:</i>
                <span id="minutes">25</span>
                <i>:</i>
                <span id="scond">20</span>
            </p>
            <p class="tips">
                现在是10:30:00
            </p>
        </div>

        <script type="text/javascript">
            var next = document.querySelector('.next');
            var hour = document.querySelector('#hour');
            var minutes = document.querySelector('#minutes');
            var scond = document.querySelector('#scond');
            var tips = document.querySelector('.tips');

            var date1 = new Date();
            var year = date1.getFullYear()
            var month = date1.getMonth() + 1;
            var dates = date1.getDate();
            dates=dates<10 ? '0'+dates : dates;
            
            //解决头部：今天是2022年10月17日
            next.innerHTML=`今天是${year}年${month}月${dates}日`;
            
            time();
            setInterval(time,1000);
            function time(){
                //1、获取当前时间戳
                var now=+new Date();
                //获取指定的时间戳
                var last=+new Date('2022-10-20 00:00:00');
                //得到当前时间和指定时间的差
                var count=(last-now)/1000;
                
                var h=parseInt(count / 60 / 60 % 24);
                h=h<10 ? '0'+h : h;
                var m=parseInt(count / 60 % 60);
                m=m<10 ? '0'+m : m;
                var s=parseInt(count % 60);
                s=s<10 ? '0'+s : s;
                hour.innerHTML=h;
                minutes.innerHTML=m;
                scond.innerHTML=s;
            }
            
            getTimes();

            setInterval(getTimes, 1000);

            function getTimes() {
                var date2 = new Date();
                var hours = date2.getHours();
                var minutes = date2.getMinutes();
                var seconds = date2.getSeconds();

                tips.innerHTML = `现在是：${hours}:${minutes}:${seconds}`;
            }
            
        </script>

    </body>

</html>

定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <textarea name="" id="" cols="30" rows="10"> 
              用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
        </textarea><br>
        <button class="btn" disabled>
            我已阅读用户协议(6)
        </button>
        <script>
            var btn=document.querySelector('.btn');
            var i=6;
            var timer=setInterval(function(){
                i--;
                btn.innerHTML=`我已阅读用户协议(${i})`;
                if(i==0){
                    clearInterval(timer);
                    btn.disabled=false;
                    btn.innerHTML=`我同意该协议`;
                }
            },1000)
        </script>
    </body>
</html>

posted on 2022-10-19 10:20 跳支舞吗阅读(15) 评论(0) 编辑收藏举报

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

一些js功能