Question

现在我改造了1个网站，我需要做一件事，会有按钮，当用户点击按钮时，他会得到带有我会创建的文字的文字，例如：

用户点击按钮，他得到文字“你好123”

他离开页面，过了一段时间后回来，点击按钮，他又得到了另一个文字，比如“Hello 321”

他刷新页面，或者离开并返回，点击按钮，得到另一个文本，如“Hello 231”

依此类推，直到我创建的所有文本都将结束，然后他们应该从第一次开始重复。

任何想法如何使这个工作？我想我应该使用cookies，记住用户点击按钮，但我没有任何使用cookies的经验，也许任何人都可以提供帮助？

我做了类似这样的事情，但我需要每个用户在离开页面或刷新页面后都能获得轮换文本。对不起我的英语，我很难在这个主题中将我的语言翻译成英语。

    <!DOCTYPE html>
<html>
<body>
<button onclick="textafterclicked()">Click on me</button>

<p id="demo"></p>

<script>
function textafterclicked() {
    var r_text = new Array (); 
r_text[0] = "Hello 123"; 
r_text[1] = "Hello 321"; 
r_text[2] = "Hello 312"; 
r_text[3] = "Goodbye 123"; 
r_text[4] = "Goodbye 321"; 

var i = Math.floor(r_text.length * Math.random()); 

document.write("<center><FONT SIZE=72><FONT COLOR='BLACK'>" + 
r_text[i]  + "</FONT></center>"); 



document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]; 
}
</script>

</body>
</html>

链接：https://www.w3schools.com/code/tryit.asp?filename=FP00EY31A07Z

Answer 1

如果您只想要一个JS解决方案并且想要使用cookie，那么您需要更小的帮助函数来获取和设置浏览器中的cookie。我在您的代码中添加了getCookie(name)和setCookie(name, value, days)函数。

以下是步骤：

获取名为myIndex
如果未设置cookie，则初始化为0
查看内容
如果myIndex在您的数组范围r_text - ＆gt;增量
如果myIndex超出范围 - ＆gt;删除cookie

这是你的代码。请确保您在localhost或域上打开它。否则你无法访问cookie。

<!DOCTYPE html>
<html>
<body>
<button onclick="textafterclicked()">Click on me</button>

<p id="demo"></p>

<script>

function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

function setCookie(name, value, days) {
    var d = new Date;
    d.setTime(d.getTime() + 24*60*60*1000*days);
    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    return value;
}

var i = getCookie('myIndex'); 
console.info(i);

if (!i){
 i = setCookie('myIndex', 0, 365);
}

var r_text = new Array (); 
	r_text[0] = "Hello 0"; 
	r_text[1] = "Hello 1"; 
	r_text[2] = "Hello 2"; 
	r_text[3] = "Hello 3"; 
	r_text[4] = "Hello 4"; 


function textafterclicked() {

	i = parseInt(i);
	
	document.write("<center><FONT SIZE=72><FONT COLOR='BLACK'>" +  r_text[i]  + "</FONT></center>"); 

	if(i >= r_text.length - 1){
		setCookie('myIndex', '', -1); // delete 
	}else{
		setCookie('myIndex', '', -1); // delete first
		i = setCookie('myIndex', i+1, 365); // set it with incremented value
	}

// document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]; 
}
</script>

</body>
</html>

需要帮助，我需要创建代码，按钮和重复文本出现

1 个答案: