整理出来的js实现显示文本框剩余字数和倒计时

来源:互联网 发布:剑网三冷萝莉捏脸数据 编辑:程序博客网 时间:2024/04/29 22:25

--------------------------------textare文本框显示剩余字数 start-------------------------
<textarea class="ref-inputwo" title="只能输入300个字符" name="description" onkeyup="oneLength(this);"></textarea>
<span id="one" class="ref-twospan">300</span>


<script >
function oneLength(which) {  
var maxChars = 300;  
if (which.value.length > maxChars)  
which.value = which.value.substring(0,maxChars);  
var curr = maxChars - which.value.length;  
document.getElementById("one").innerHTML = curr.toString();  
}  
 </script>
--------------------------------textare文本框显示剩余字数 end-------------------------




-----------------------------------------倒计时  start-----------------------------------------
<style>
  /*倒计时*/
        .countdown{   
        width: 100%;
        height:15%;
        background: black;
        text-align: center;
        color: white;
        padding: 2% 0;
        }
        .countdown P{
        color: white;
        }
        .strartime{
        font-size: 1em;
        }
         .strartime span{
        font-size: 1em;
        }
            
        #lastime {
        color: white;
        font-size: 0.8em;
        }
        #lastime span{
        display: inline-block;
        width: 1.5em;
        margin: 0 1%;
        border-radius: 0.1em;
        border: 1px solid #FFFFFF;
        }  
</style>




<script type="text/javascript"> 
function countdown(){
    var lastime = document.getElementById("lastime");
    endtime = new Date("4/24/2017 18:00:00");//结束时间
    today = new Date();//当前时间
    delta_T = endtime.getTime() - today.getTime();//时间间隔
    if(delta_T < 0){
        clearInterval(auto);
        alert("倒计时已经结束"); 
    }
    window.setTimeout(countdown,1000);
    total_days = delta_T/(24*60*60*1000);//总天数
    total_show = Math.floor(total_days);//实际显示的天数
    total_hours = (total_days - total_show)*24;//剩余小时
    hours_show = Math.floor(total_hours);//实际显示的小时数
    total_minutes = (total_hours - hours_show)*60;//剩余的分钟数
    minutes_show = Math.floor(total_minutes);//实际显示的分钟数
    total_seconds = (total_minutes - minutes_show)*60;//剩余的分钟数
    seconds_show = Math.floor(total_seconds);//实际显示的秒数
    lastime.innerHTML = "倒计时:"+"<span>"+total_show+"</span>"+"天"+"<span>"+hours_show+"</span>"+"时"+"<span>"+minutes_show+"</span>"+"分"+"<span>"+seconds_show+"</span>"; 
}
countdown();
</script>
  <!--倒计时-->
 <div class="countdown">
       <p id="lastime">倒计时:<span id="day1">0</span>天<span id="hour">0</span>时<span id="minute">0</span>分<span id="second">0</span></p>
<p class="strartime">开课时间:<span id="date">2017-04-18 19:00</span>开始</p>
</div>
-------------------------------end---------------------------------------
阅读全文
0 0
原创粉丝点击