• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

کد تغییر خودکار تصویر در ساعات مختلف روز

admin

admin

Administrator
عضو کادر مدیریت
سلام
در این تاپیک به موضوعی خواهیم پرداخت که هرچند ساده می باشد اما تابحال در دنیای وب فارسی به آن پرداخته نشده است.
تغییر خودکار یک تصویر مانند یک لوگو یا هدر در سایت و یا وبلاگ شما با استفاده از یک کد برنامه نویسی، موضوع این آموزش ما خواهد بود.
در این آموزش ما سعی خواهیم کرد انجام این کار را با استفاده از دستورات جداگانه PHP و جاوا اسکریپت و همچنین HTML آموزش دهیم.
همچنین کد های قرار داده شده در این موضوع به دو دسته تقسیم خواهند شد.:
1- کدهایی که تغییر تصاویر را با استفاده از ساعت کامپیوتر کاربران انجام خواهند داد. (مناسب برای وبلاگ ها)
2- کدهایی که تغییر تصاویر را با استفاده از ساعت سرور سایت انجام خواهند داد. (مناسب برای سایت ها)

منبع این آموزش: ایران انجمن
 
admin

admin

Administrator
عضو کادر مدیریت
کد جاوا اسکریپت تغییر خودکار تصویر در ساعات مختلف روز

با استفاده از این کد جاوا شما میتوانید تصواویر خود را در وبلاگ و یا سایت خود در ساعات مختلف روز به صورت خودکار تغییر دهید.
این کد با استفاده از ساعت کامپیوتر کاربران عمل خواهد کرد.
توجه نمایید که در این کد تغییر تصاویر برای دو حالت روز و شب تعیین شده است و شما میتوانید با کمی تغییر در این کد از تصاویر بیشتر و همچنین تغییرات بیشتر در ساعات مختلف روز استفاده نمایید.
در دستور زیر کد <img id="logo" src="" alt=""> کد نمایش میباشد، و در هر قسمت از کدهای قالب شما قرار بگیرد تصویر شما به نمایش در خواهد آمد.


کد: 
<script type="text/javascript">
// For: http://www.iranjoman.com/showthread.php?t=54071
var logos = [
    'http://up.iranjoman.com/images/t33grhqc3uasfxyk0ic.jpg', 
    'http://up.iranjoman.com/images/yjjd8osd817dtgvstbh6.jpg'
]; 
onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW <= 6)) ) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
}
</script>
 <img id="logo" src="" alt="">

منبع این آموزش: ایران انجمن
 
admin

admin

Administrator
عضو کادر مدیریت
کد جاوا اسکریپت تغییر خودکار تصویر در روزهای مختلف

خب در این پست کمی کد جاوا اسکریپ قرار داده شده در پست قبلی را جالب تر میکنیم و علاوه بر دستورات تغییر تصاویر در ساعات مختلف روز به آن قابلیت تغییر خودکار تصاویر در تاریخ های خاص (میلادی) را هم اضافه میکنیم.
این کد با استفاده از ساعت کامپیوتر و همچنین تاریخ کامپیوتر کاربران عمل خواهد کرد.
در دستور زیر کد <img id="logo" src="" alt=""> کد نمایش میباشد، و در هر قسمت از کدهای قالب شما قرار بگیرد تصویر شما به نمایش در خواهد آمد.
روزهای میلادی تعیین شده برای تغییر به عکس سوم در کد زیر به صورت زیر میباشند که شما میتوانید آنهارا به روز های مورد نظر خود تغییر دهید:
1/1', '2/14', '3/17', '6/6', '6/14', '7/4','10/31','11/24','11/25','12/24','12/25



کد: 
<script type="text/javascript">
// For: [URL]http://www.iranjoman.com/showthread.php?t=54071[/URL]
 var logos = [
    'http://up.iranjoman.com/images/t33grhqc3uasfxyk0ic.jpg',  // on-air image
    'http://up.iranjoman.com/images/yjjd8osd817dtgvstbh6.jpg',  // off-air image
    'http://up.iranjoman.com/images/3vv3s8smmrtlxc11m.jpg'   // holidays image
]; 
var holidays = ['1/1', '2/14', '3/17', '6/6',  '6/14',
        '7/4','10/31','11/24','11/25','12/24','12/25'];
 onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW < 6)) ) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
     var tmp;
  for (var i=0; i<holidays.length; i++) {
    tmp = new Date(holidays[i]+'/'+now.getFullYear());
//    alert(tmp.toDateString()+'\n'+now.toDateString());  // for testing
    if (tmp.toDateString() == now.toDateString()) {
      document.getElementById('logo').src = logos[2];
    }
  }
}
</script>

منبع این آموزش: ایران انجمن
 
admin

admin

Administrator
عضو کادر مدیریت
کد تغییر خودکار تصویر در روزهای مختلف

یک کد دیگر که با استفاده از ساعت کامپیوتر کاربران تصاویر پس زمینه را در ساعت های مختلف روز تغییر میدهد.
فایل نمونه پیوست شد.


کد: 
<html>
<head>
    <title></title>
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
</head>
    <body>
    
    <img id="bg"/>


    <script type="text/javascript">
        var bgChanger = function () {
            var _morningUrl, _noonUrl, _nightUrl, _imageTag;


            var init = function (morningUrl, noonUrl, nightUrl, imageTagId) {
                _morningUrl = morningUrl;
                _noonUrl = noonUrl;
                _nightUrl = nightUrl;
                _imageTag = document.getElementById(imageTagId);
            };


            var run = function () {
                loopFn();
                setInterval(loopFn, 1000 * 60);
            };


            var loopFn = function () {
                var currentDate = new Date();
                /* console.log(currentDate); */
            
                if (isMorning(currentDate)) {
                    _imageTag.setAttribute("src", _morningUrl);
                } else if (isNoon(currentDate)) {
                    _imageTag.setAttribute("src", _noonUrl);
                } else /* if (isNight(currentDate)) */ {
                    _imageTag.setAttribute("src", _nightUrl);
                }
            };


            function isMorning(time) {
                return (time.getHours() >= 6 && time.getHours() < 14);
            }
            function isNoon(time) {
                return (time.getHours() >= 14 && time.getHours() < 18);
            }
            /*
        function isNight(time) {
            return (time.getHours() >= 18 && time.getHours() <= 6);
        }
        */


            return { init: init, run: run };
        };


        var myBgChanger = new bgChanger();
        myBgChanger.init('http://up.iranjoman.com/images/7sqdaznk68m42emzj0l.jpg', 'http://up.iranjoman.com/images/r44ekfp3lcae8bqww80z.jpg', 'http://up.iranjoman.com/images/9pf2spf9w023qrg46fd.jpg', 'bg');
        myBgChanger.run();


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

منبع این آموزش: ایران انجمن
 

پیوست ها

  • iranjoman.Com.zip
    12.4 کیلوبایت · بازدیدها: 8
آخرین ویرایش:
admin

admin

Administrator
عضو کادر مدیریت
کد PHP تغییر خودکار تصویر در روزهای مختلف

سلام
با استفاده از این کد PHP شما میتوانید تعداد تصاویر مورد نظر خود را به صورت خودکار تغییر داده و در ساعات مختلف روز به نمایش در آورید.
توجه نمایید که این کد مخصوص سایت ها بوده و بر خلاف کدهای قبلی که بر اساس ساعت کامپیوتر کاربران عمل میکردند، این کد بر اساس ساعت سرور سایت عمل میکند.

PHP: 
<?phpdate_default_timezone_set('Asia/Tehran'); $hour = date('G'); if($hour > 5) { $image = "http://up.iranjoman.com/images/7sqdaznk68m42emzj0l.jpg"; $alt = "Mornin' all."; } if($hour > 16) { $image = "http://up.iranjoman.com/images/r44ekfp3lcae8bqww80z.jpg"; $alt = "Getting late."; } if($hour > 22 || $hour < 6) { $image = "http://up.iranjoman.com/images/9pf2spf9w023qrg46fd.jpg"; $alt = "Nighty night."; } echo "<img src='".$image."' alt='".$alt."' />"; ?>
طریقه ی استفاده:
شما باید این کد را به صورت یک فایل پی اچ پی در هاست خود ذخیره نمایید و سپس در هر قسمتی از وبسایت خود که قصد نمایش تصاویر مورد نظر خود را دارید از کد زیر استفاده نمایید:

کد: 
<iframe name="img_frame" align="left" marginWidth="3" marginHeight="3" src="[COLOR=#0000ff]http://iranjoman.com/time.php[/COLOR]?" [COLOR=#ff0000]width="11%"[/COLOR] scrolling="no" [COLOR=#ff0000]height="105"[/COLOR] border="0" target="_top" frameborder="0"></iframe>
</p>
نیاز هست که در این کد تغییرات مورد نظر خود را اعمال نمایید.

منبع: ایران انجمن
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا