22 日期特效&长图滚动

Posted 2022-03-17 znyyy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了22 日期特效&长图滚动相关的知识，希望对你有一定的参考价值。

日期特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期特效</title>
    <style type="text/css">
        *
                padding: 0;
                margin: 0;
            
            #date
                width: 450px;
                height: 300px;
                background-color: darkorange;
                border-radius: 10px;
                margin: 100px auto;
            
            #nowDate
                width: 450px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                color: #fff;
                font-size: 26px;
            
            #day
                width: 200px;
                height: 200px;
                line-height: 200px;
                background-color: orchid;
                margin: 0 auto;
                text-align: center;
                color:#fff;
                font-weight: bold;
                font-size: 60px;
            
    </style>
</head>
<body>
<div id="date">
    <p id="nowDate"></p>
    <p id="day"></p>
</div>
<script type="text/javascript">
    // 1.获取标签
    var  nowDate = document.getElementById(‘nowDate‘);
    var  day = document.getElementById(‘day‘);
    // 用定时器 更新时间的变化
    setInterval(nowNumTime, 10);

    function nowNumTime()
        var now = new Date();
        var hour  = now.getHours(); //0 ~ 23.   //19
        var minute = now.getMinutes();
        var second = now.getSeconds();
        var year = now.getFullYear();
        var month = now.getMonth();
        var d = now.getDate();
        var week = now.getDay();
        //console.log(week); //索引
        var weeks = [‘星期天‘,‘星期一‘,‘星期二‘,‘星期叁‘,‘星期肆‘,‘星期伍‘,‘星期六‘];
        // 18 > 12  ? 18-12  : 8
        var temp = ‘‘ + (hour > 12 ?  hour - 12 : hour);
        if(hour === 0)
            temp = ‘12‘;
        
        temp  = temp +(minute < 10 ?  ‘:0‘: ":")+ minute;
        temp  = temp +(second < 10 ?  ‘:0‘: ":")+ second;
        temp = temp + (hour >= 12 ?  ‘ P.M.‘: " A.M.");
        temp = `$year年$month月$d日  $temp $weeks[week]`;
        nowDate.innerHTML = temp;
    
</script>
</body>
</html>

长图滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform的运用</title>
    <style type="text/css">
        #box
            margin-top: 10px;
            height: 50px;
            width: 50px;
            background-color: #ff6700;
            /*transform: translate(100px,100px);*/
        
    </style>
</head>
<body>
    <button id="btn">move it</button>
    <div id="box"></div>
    <script type="text/javascript">
        var btn = document.getElementById(‘btn‘);
        var box = document.getElementById(‘box‘);
        var index = 1;
        window.onload = function () 
            btn.onclick = function () 
                box.style.transform = `translate($10*indexpx,$5*indexpx)
                 rotate($0.2*indexdeg)  scale(2.0) skew($0.1*indexdeg)`;
                index++;
            
        
    </script>
</body>

以上是关于22 日期特效&长图滚动的主要内容，如果未能解决你的问题，请参考以下文章

粒子特效优化

JavaCV开发详解之34：使用filter滤镜实现字符滚动和无限循环滚动字符叠加，跑马灯特效制作

分享一些经典的特效效果,希望对大家有帮助

Cocos2d-x学习笔记（16）（常见22种特效）