ある時刻までカウントダウンした後、別サイトへのリンクを表示したい

前提・実現したいこと

ある時刻までカウントダウンして、残り0日0時間0分0秒となった後、その表示を消して、別のサイトへのリンクを代わりに表示したいです。カウントダウンに関しては出来合いのものを分からないながらに改良してなんとか正常に動くようになりましたが、jsに関して初心者に近く、それ以上のことが調べてもどうやって良いのか分かりませんでした。上記のことの実現方法について、ご教授をお願いします。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6<link rel="stylesheet" href="css/aaa.css">
7</head>
8
9<body>
10  <div class="main none" id="main">
11	<div id="timerhp"></div>
12  </div>
13
14	
15  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
16  <script type="text/javascript" src="javascript/countdown.js"></script>
17  
18
19</body>
20</html>
21

css
1@charset "utf-8";
2/* CSS Document */
3
4body{
5	margin:0 
6}

js
1// JavaScript Document
2
3/*
4 * jquery.yycountdown plugin
5 *
6 * Copyright (c) 2014 YYengine Yuji Yamabata
7 * Dual licensed under the MIT and GPL licenses.
8 * http://docs.jquery.com/License
9 */
10;(function($) {
11	$.fn.yycountdown = function(options){
12		
13		//default setting
14		var defaults = {
15			startDateTime : new Date(),
16			endDateTime   : '2020/06/29 10:00:00',
17			diffDateTime  : 0,
18			unit          : {d: '日', h: '時間', m: '分', s: '秒'},
19			complete      : null,
20			node          : {d: null, h: null, m: null, s: null},
21			self          : null,
22			timerId       : null
23		};
24		var setting = $.extend(defaults, options);
25		
26		//DOM node set
27		setting.self = $(this);
28
29		//coutdown init
30		var _initTimer = function(){
31			//change string to Date object
32			if(typeof setting.complete !== 'Date'){
33				setting.startDateTimeObj = new Date(setting.startDateTime);
34			}
35			setting.endDateTimeObj   = new Date(setting.endDateTime);
36			setting.diffDateTime     = Math.floor((setting.endDateTimeObj - setting.startDateTimeObj) / 1000);
37			
38			//view node setting
39			var box        = $('<div />').addClass('yycountdown-box');
40			var boxDay     = $('<span />').addClass('yyc-day');
41			var boxHou     = $('<span />').addClass('yyc-hou');
42			var boxMin     = $('<span />').addClass('yyc-min');
43			var boxSec     = $('<span />').addClass('yyc-sec');
44			var boxDayText = $('<span />').addClass('yyc-day-text');
45			var boxHouText = $('<span />').addClass('yyc-hou-text');
46			var boxMinText = $('<span />').addClass('yyc-min-text');
47			var boxSecText = $('<span />').addClass('yyc-sec-text');
48			
49			boxDayText.html(setting.unit.d);
50			boxHouText.html(setting.unit.h);
51			boxMinText.html(setting.unit.m);
52			boxSecText.html(setting.unit.s);
53
54			box.append(boxDay).append(boxDayText)
55				.append(boxHou).append(boxHouText)
56				.append(boxMin).append(boxMinText)
57				.append(boxSec).append(boxSecText);
58			setting.self.append(box);
59			
60			setting.node.d = setting.self.find('.yyc-day');
61			setting.node.h = setting.self.find('.yyc-hou');
62			setting.node.m = setting.self.find('.yyc-min');
63			setting.node.s = setting.self.find('.yyc-sec');
64		}
65
66		//timer coutdown
67		var _countTimer = function(){
68			var objDiff = _formatTimer(--setting.diffDateTime);
69			_viewTimer(objDiff);
70			if(setting.diffDateTime <= 0)  _completeTimer();
71		}
72		
73		//time view
74		var _viewTimer = function(objDiff){
75			setting.node.d.html(objDiff.d);
76			setting.node.h.html(('0' + objDiff.h).slice(-2));
77			setting.node.m.html(('0' + objDiff.m).slice(-2));
78			setting.node.s.html(('0' + objDiff.s).slice(-2));
79		}
80		
81		//change ms to _day_hour_min_sec
82		var _formatTimer = function(diff){
83			var oneM = 60;
84			var oneH = 60 * 60;
85			var oneD = 60 * 60 * 24;
86			var diffDay    = Math.floor(diff / oneD);
87			var diffHour   = Math.floor((diff - diffDay * oneD) / oneH);
88			var diffMinute = Math.floor((diff - diffDay * oneD - diffHour * oneH) / oneM);
89			var diffSecond = Math.floor((diff - diffDay * oneD - diffHour * oneH - diffMinute * oneM));
90			
91			return {
92				d: diffDay,
93				h: diffHour,
94				m: diffMinute,
95				s: diffSecond
96			};
97		}
98
99		//timer complete
100		var _completeTimer = function(){
101			clearInterval(setting.timerId);
102			if(typeof setting.complete === 'function')  setting.complete(setting.self);
103		}
104		
105		//coutdown timer start
106		_initTimer();
107		setting.timerId = setInterval(_countTimer, 1000);
108	};
109	
110})(jQuery);
111
112$('#timerhp').yycountdown({
113  endDateTime   : '2020/06/29 10:00:00'
114});
115

行動規範の内容に同意します

回答1件

ベストアンサー

        //timer complete
        var _completeTimer = function(){
            clearInterval(setting.timerId);
            if(typeof setting.complete === 'function')  setting.complete(setting.self);
            document.getElementById("timerhp").innerHTML="<a href='https://google.com'>クリック</a>";　//ここで指定
        }

こんな方法ではいかがでしょうか？

投稿2020/06/26 14:09

編集2020/06/26 14:18