تغيير مؤقت الثواني

Ahmed Nasri · 5 فبراير 2020

لدي مؤقت ثواني في موقعي وبعدها يقوم بإظهار رابط اريد تغييره بمؤقت اخر

مؤقت موقعي مثل هدا مؤقت موقعي

المؤقت الدي اريد تغييره اليه هو مؤقت المثال الدي اريده

Entesar Khaled · 6 فبراير 2020

حسنًا ما المشكلة! قم بحذف شيفرة المؤقت في موقعك واستبدلها بالشيفرة الأخرى.

على العموم قمت بتجميع الشيفرة لك في مكان واحد، ما عليك الآن سوى إنشاء ملف html وليكن اسمه index.html وتضع فيه الشيفرة التالية لتجربها، بعد ذلك انقل السطر رقم 70 إلى جزئية ال body بشيفرة صفحة موقعك، ثم انقل ما بداخل <style> إلى ملف التنسيقات css لديك أو كما وضعته أنا في ال head وكذلك انقل ما بداخل <script> إلى ملف javascript لديك أو كما وضعته أنا في ال body

<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<style>
body {
  font-family: sans-serif;
  display: grid;
  height: 100vh;
  place-items: center;
}

.base-timer {
  position: relative;
  width: 300px;
  height: 300px;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

</style>
</head>

<body>
  <div id="app"></div>
<script>
    // Credit: Mateusz Rybczonec

const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};

const TIME_LIMIT = 20;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;

document.getElementById("app").innerHTML = `
<div class="base-timer">
  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g class="base-timer__circle">
      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        class="base-timer__path-remaining ${remainingPathColor}"
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <span id="base-timer-label" class="base-timer__label">${formatTime(
    timeLeft
  )}</span>
</div>
`;

startTimer();

function onTimesUp() {
  clearInterval(timerInterval);
}

function startTimer() {
  timerInterval = setInterval(() => {
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );
    setCircleDasharray();
    setRemainingPathColor(timeLeft);

    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}

function setRemainingPathColor(timeLeft) {
  const { alert, warning, info } = COLOR_CODES;
  if (timeLeft <= alert.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(warning.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(alert.color);
  } else if (timeLeft <= warning.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(info.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(warning.color);
  }
}

function calculateTimeFraction() {
  const rawTimeFraction = timeLeft / TIME_LIMIT;
  return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}

function setCircleDasharray() {
  const circleDasharray = `${(
    calculateTimeFraction() * FULL_DASH_ARRAY
  ).toFixed(0)} 283`;
  document
    .getElementById("base-timer-path-remaining")
    .setAttribute("stroke-dasharray", circleDasharray);
}

</script>
</body>

</html>

Ahmed Nasri · 6 فبراير 2020

حسنا المشكلة هي في تغيير اكواد موقعي في لاتتناسب مع الاكواد الموجودة

يجب تغيير الاكواد الموجودة في موقعي لتتناسب اكود موقعي في الاسفل

<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<style>

.countdown {
	border: 2px solid #888;
	border-radius: 50%;
	color: #888;
	display: block;
	font-size: 16px;
	font-weight: 300;
	height: 100px;
	line-height: 18px;
	margin: 25px auto;
	padding: 29px 0 0;
	width: 100px
}

.countdown .timer {
	font-size: 25px
}

</style>
</head>

<body>
    <span id="countdown" class="countdown">
        <span id="timer" class="timer">
		<div id="app"></div>
            <?= get_option('counter_value', 5) ?>
        </span><br><?= __('Seconds') ?>
    </span>
<script>

$(counter_start_object).
    on(app_vars['counter_start'] + '.adLinkFly.counter', function(e) {
      if (ad_type === 'banner') {
        var timer = $('#timer');

        window.setTimeout(function() {
          var time = app_vars['counter_value'] * 1000,
              delta = 1000,
              tid;

          tid = setInterval(function() {
            if (window.blurred) {
              return;
            }
            time -= delta;
            timer.text(time / 1000);
            if (time <= 0) {
              clearInterval(tid);

              $('#go-link').addClass('go-link');
              $('#go-link.go-link').submit();
            }
          }, delta);
        }, 500);

        window.onblur = function() {
          window.blurred = true;
        };
        window.onfocus = function() {
          window.blurred = false;
        };
      }

      if (ad_type === 'interstitial') {
        var skip_ad = $('.skip-ad');
        var counter = $('.skip-ad .counter');

        window.setTimeout(function() {
          var time = app_vars['counter_value'] * 1000,
              delta = 1000,
              tid;

          tid = setInterval(function() {
            time -= delta;
            counter.text((time / 1000) + ' s');
            if (time <= 0) {
              skip_ad.html(
                  '<a href="" class="btn" onclick="javascript: return false;">' +
                  app_vars['skip_ad'] + '</a>');
              clearInterval(tid);
              $('#go-link').addClass('go-link');
              $('#go-link.go-link').submit();
            }
          }, delta);
        }, 500);
      }

    });

</script>
</body>

</html>