JavaScript diceRoller 仅适用于 Chrome-6ren

JavaScript diceRoller 仅适用于 Chrome

转载作者：行者123 更新时间：2023-11-27 23:55:14

下面的代码仅适用于谷歌浏览器，如果我尝试使用任何其他浏览器，它就无法工作。我怀疑这与我发送到 php.ini 的数据类型有关。不过，我并不完全确定。

链接到代码托管位置:http://coldrepublic.com/diceRoller(1).html

代码:

PHP

<?php 
if(!empty($_POST['data']))
    { $data = $_POST['data']; 
    $file = 'log.txt';
    // Open the file to get existing content
    $current = $data;
    // Append a roll to the file
    $current .= file_get_contents($file);
    // Write the contents back to the file
    file_put_contents($file,$current);
}
else{
    $file = 'log.txt';
    // Open the file to get existing content
    $current = "No Value sent\n";
    // Append a new person to the file
    $current .= file_get_contents($file);
    // Write the contents back to the file
    file_put_contents($file, $current);
}

？>

Javascript/HTML

<!DOCTYPE html>
<html>
<head>
<style>

#CharacterLabel {margin-right:110px}
#ActionLabel {margin-right:125px}
#NumOfDiceLabel {margin-right:60px}
#SidesLabel {margin-right:20px}

</style>
</head>
<body onload="myFunction()">
<p><label id="CharacterLabel" for="CharacterInput">Character:</label> 
<label id="ActionLabel" for="ActionInput">Action:</label>
<label id="NumOfDiceLabel" for="NumDice">Number of Dice:</label>
<label id="SidesLabel" for="Sides">Sides:</label>
<label id="BonusLabel" for="BonusInput">Bonus:</label></p>
<p><input type="text" name="Character" id="CharacterInput" />
<input type="text" name="Action" id="ActionInput" />
<input type="text" name="NumberOfDice" id="NumDice" />
<select id="Sides">
	<option value="3">d3</option>
	<option value="4">d4</option>
	<option value="6">d6</option>
	<option value="8">d8</option>
	<option value="10">d10</option>
	<option value="12">d12</option>
	<option value="20" select="selected">d20</option>
	<option valoue="100">d100</option>
</select>
<input type="text" name="Bonus" id="BonusInput" /></p>
<p><button onclick="rollDice()" style="width:100px; height:50px;">Roll Dice</button></p>
<p><textarea name="Output" id="OutputBox" rows="10" cols="100" readonly="true"/></textarea></p>
<label id="ErrorLog">Message:</label>

<script>

function getXMLHttpRequestObject(){
	var ajaxWork=null;
	if(window.XMLHttpRequest){
		ajaxWork = new XMLHttpRequest();
	}
	else if (window.ActiveXObject){
		ajaxWork = new ActiveXObject('MSXML2.XMLHTTP.3.0');
	}
	return ajaxWork;
}

function callAjax(ajaxWork)
{
	ajaxWork.open('GET', 'http://coldrepublic.com/log.txt', true);
	ajaxWork.send(null)
}

function writeToLog(toLog)
{
	var data = new FormData();
    	data.append("data",toLog);
	
	var xhr = getXMLHttpRequestObject();
	xhr.open( 'POST', 'http://coldrepublic.com/writeToLog.php', true );

	xhr.send(data);
}

function myFunction(){

	var ajaxWork = getXMLHttpRequestObject();

	ajaxWork.onreadystatechange = function(){
		if(ajaxWork.readyState == 4){
			if((ajaxWork.status >=200 && ajaxWork.status < 300)
			|| (ajaxWork.status == 304)){
				document.getElementById('OutputBox').value = ajaxWork.responseText;
			
			}
			else{
				document.getElementById('ErrorLog').innerHTML = "Message: Error! Did not properly read file";
			}
		}
	}
	
	callAjax(ajaxWork);
}

function rollDice(){
	var character = document.getElementById("CharacterInput").value;
	var action = document.getElementById("ActionInput").value;
	var sides = parseInt(document.getElementById("Sides").value);
	var diceRolls = "";
	var toLog = "";
	
	var OutputBox = document.getElementById('OutputBox');

	document.getElementById('ErrorLog').innerHTML = 'Message:';

	var bonusBlank = document.getElementById("BonusInput").value;

	if(character == null || character == "",action == null || action == "")
	{	

		document.getElementById('ErrorLog').innerHTML = 'Message: Error! Must enter value for Character or Action.';
	}
	else
	{
		if(isInt(parseInt(document.getElementById("NumDice").value)) && isInt(parseInt(document.getElementById("BonusInput").value)))
		{
			var numDice = parseInt(document.getElementById("NumDice").value);
			var bonus = document.getElementById("BonusInput").value;

 			for (i=0; i < numDice; i++)
			{
				var numTemp = Math.floor(Math.random() * sides) +1;
				var strTemp = numTemp.toString();
				diceRolls = diceRolls.concat(" " + strTemp);
			}
		
			var outTemp = "";
			var outTemp = outTemp.concat();
			var dateTemp = timeStamp();
			
			toLog = character + " " + action + " " + diceRolls + " Bonus: " + bonus + " Timestamp: " + dateTemp + "\n" ;
			writeToLog(toLog);
			location.reload();
			location.reload();
		}
		else
		{
			if(bonusBlank == null || bonusBlank == "")
			{
				var numDice = parseInt(document.getElementById("NumDice").value);
				var bonus = 0;

 				for (i=0; i < numDice; i++)
				{
					var numTemp = Math.floor(Math.random() * sides) +1;
					var strTemp = numTemp.toString();
					diceRolls = diceRolls.concat(" " + strTemp);
				}
		
				var outTemp = "";
				var outTemp = outTemp.concat();
				var dateTemp = timeStamp();
				
				toLog = character + " " + action + " " + diceRolls + " Bonus: " + bonus + " Timestamp: " + dateTemp + "\n";
				writeToLog(toLog);
				location.reload();
				location.reload();
			}
			else
			{
				document.getElementById('ErrorLog').innerHTML = 'Message: Error! Entered non-integer value for Number of Dice or Bonus.';
			}
		}
	}
}

function isInt(value) {
  return !isNaN(value) && 
         parseInt(Number(value)) == value && 
         !isNaN(parseInt(value, 10));
}

function timeStamp(){
	// Create a date object with the current time
  	var now = new Date();

	// Create an array with the current month, day and time
  	var date = [ now.getMonth() + 1, now.getDate(), now.getFullYear() ];

	// Create an array with the current hour, minute and second
  	var time = [ now.getHours(), now.getMinutes(), now.getSeconds() ];

	// Determine AM or PM suffix based on the hour
  	var suffix = ( time[0] < 12 ) ? "AM" : "PM";

	// Convert hour from military time
  	time[0] = ( time[0] < 12 ) ? time[0] : time[0] - 12;

	// If hour is 0, set it to 12
  	time[0] = time[0] || 12;

	// If seconds and minutes are less than 10, add a zero
  	for ( var i = 1; i < 3; i++ ) {
    	if ( time[i] < 10 ) {
      		time[i] = "0" + time[i];
    	}
  }

	// Return the formatted string
  	return date.join("/") + " " + time.join(":") + " " + suffix;
	
}
</script>

</body>
</html>

最佳答案

我没有太注意你的代码的作用，但我想我知道问题是什么，如果我的解决方案是正确的，我将添加一些关于你的代码的其他想法。

您的代码可以在 Chrome 中运行，因为 Chrome 的运行速度比任何其他浏览器都快，并且它能够在调用页面重新加载之前执行您的 xhr 调用(实际上，它在 Chrome 中运行只是运气好，在某些计算机上结果可能会有所不同，因此它可能在其他浏览器中工作或根本不工作)。要使其在任何其他浏览器中工作，您需要向 xhr 调用添加回调并在回调内执行 location.reload(); 。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

function writeToLog(toLog)
{
    var data = new FormData();
    data.append("data",toLog);

    var xhr = getXMLHttpRequestObject();
    xhr.open( 'POST', 'http://coldrepublic.com/writeToLog.php', true );

    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log('ok');
          location.reload();
        } else {
          console.error('problem');
        }
      }
    };

    xhr.send(data);
}

不要忘记从 rollDice 中的其他位置删除 location.reload();

        toLog = character + " " + action + " " + diceRolls + " Bonus: " + bonus + " Timestamp: " + dateTemp + "\n" ;
        writeToLog(toLog);
    }

编辑:由于主要问题已解决，因此还有一些其他建议

字符== null

这些值来自输入，并且输入存储字符串，因此它们永远不会是空值，只有character == ""就足够了

你在这里做什么

if(字符 == null || 字符 == "", Action == null || Action == "")

错误，您使用逗号运算符 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator而不是另一个OR (||)

isInt(parseInt(document.getElementById("NumDice").value)

太广泛了parseInt返回NaN或Number，所以

function isInt(value) {
  return !isNaN(value) && 
     parseInt(Number(value)) == value && 
     !isNaN(parseInt(value, 10));
}

没有任何意义。

if (!isNaN(NaN)) 与 if (NaN)

相同

parseInt(Number(value)) == value 在这里再次没有意义，因为您已经将 parseInt 的结果传递给它 (isInt(parseInt(document.getElementById("NumDice")) .value)))

和这里一样 !isNaN(parseInt(value, 10)); 如果它是数字，它将是任何基数的数字，如果它是 NaN，它总是 NaN

<小时/>

if (parseInt(document.getElementById("NumDice").value)... 应该已经足以检查输入的数字是否有效(0 也是有效的，所以您可能还想添加 > 0 检查)

如果您想检查 1 是否不是从 1sdfsdf 转换而来，那么您可能需要添加

var numdice = document.getElementById("NumDice").value; 
if (numdice == parseInt(numdice)...

关于JavaScript diceRoller 仅适用于 Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32316897/

文章推荐： jquery 移动水平控制组，包括文本框的混合

文章推荐： javascript - 使用滤镜时提高 Angular 性能

文章推荐： c++ - ranges-v3 中的洗牌 Action

文章推荐： javascript - 有条件地不在 d3.symbol d3.js 中使用符号

java - Diceroll 概率方法结构
我遇到的问题是非常基本的，但是我还没有很好地理解这一点。下面的程序使用递归来计算给定数量的骰子(由用户输入)总计为用户选择的数字的概率。据我了解，方法 DiceRoll 是 Diceroll 类的一
iOS - Diceroll 增加一个对象的出现频率
在我的应用程序中，当敌人被杀死时，弹药就会掉落。此代码有 4 种不同类型的弹药 int diceRoll = arc4random() % 3;//0 到 3 现在，每种弹药类型的生成频率为 25%。
c++ - diceroll 的位图
你会如何掷骰子并显示相应的骰子面位图一些快速高效的代码示例？ void CMFCApplication12Dlg::OnBnClickedDiceroll() { int d
Java GUI DiceRoll 应用程序
我目前正在开发一个简单的 GUI 应用程序，可以掷两个骰子。我目前使用两个类，一个称为“Game”，另一个称为“DiceRoll”。为了满足分配标准，我们必须使用多个类才能使程序正常运行。仅使用一个类
JavaScript diceRoller 仅适用于 Chrome
下面的代码仅适用于谷歌浏览器，如果我尝试使用任何其他浏览器，它就无法工作。我怀疑这与我发送到 php.ini 的数据类型有关。不过，我并不完全确定。链接到代码托管位置:http://coldrepu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript diceRoller 仅适用于 Chrome