我有一个php脚本，其中有一个表格，用于通过Google翻译小部件来翻译/编辑文本变量。因此，我只需要在此php代码中使用Autoscroll选项，这样，当客户端上传文本时，他只需要按一些按钮并在表上进行自动滚动即可开始工作，直到文本翻译结束为止。
这可能吗？
这是我的翻译脚本的代码，我可以在此处插入自动滚动选项代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122672047-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-122672047-1');
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3840661714519646",
enable_page_level_ads: true
});
</script>
<link rel="icon" href="favicon.png" type="image/png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=translate and edit srt subtitles online for free">
<meta name="author" content="">
<title>Translate/Edit Subtitles - Subtitle Translator</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/one-page-wonder.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="dropzone.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="dropzone.js"></script>
<style type="text/css">
.dropzone {
border: 2px dashed #dedede;
border-radius: 5px;
background: #f5f5f5;
}
.dropzone i{
font-size: 2rem;
}
.dropzone .dz-message {
color: rgba(0,0,0,.54);
font-weight: 500;
font-size: initial;
text-transform: uppercase;
}.loader {
margin-left: 35% !important;
margin-top: 10%;
margin-bottom: 10%;
align-content: center;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 200px;
height: 200px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<?php
$file_name=$_GET["srt"];
ini_set('MAX_EXECUTION_TIME', -1);
define('SRT_STATE_SUBNUMBER', 0);
define('SRT_STATE_TIME', 1);
define('SRT_STATE_TEXT', 2);
define('SRT_STATE_BLANK', 3);
$lines = file("uploads/".$file_name);
$subs = array();
$state = SRT_STATE_SUBNUMBER;
$subNum = 0;
$subText = '';
$subTime = '';
foreach($lines as $line) {
switch($state) {
case SRT_STATE_SUBNUMBER:
$subNum = trim($line);
$state = SRT_STATE_TIME;
break;
case SRT_STATE_TIME:
$subTime = trim($line);
$state = SRT_STATE_TEXT;
break;
case SRT_STATE_TEXT:
if (trim($line) == '') {
$sub = new stdClass;
$sub->number = $subNum;
list($sub->startTime, $sub->stopTime) = explode(' --> ', $subTime);
$sub->text = $subText;
$subText = '';
$state = SRT_STATE_SUBNUMBER;
$subs[] = $sub;
} else {
$subText .= $line;
}
break;
}
}
if ($state == SRT_STATE_TEXT) {
// if file was missing the trailing newlines, we'll be in this
// state here. Append the last read text and add the last sub.
$sub->text = $subText;
$subs[] = $sub;
}
?>
<header style="display: none" id="to_be_shown" class="masthead text-center text-white">
<div class="masthead-content">
<div class="container">
<h1 class="masthead-subheading mb-0"><font size="6">Online Subtitles Translator & Editor</font></h1>
<form id="upload-widget" method="post" action="upload.php" class="dropzone">
<div class="dz-message d-flex flex-column">
<i class="material-icons text-muted">cloud_upload</i>
Drag & Drop here or click
</div>
</form> </div>
</div>
</header>
<div id="hiddden">
<div class="to_be_hidden" style="border: 1px solid #007bff;margin-top: 10%;padding: 2em">
<div id="google_translate_element"> </div>
<div class="notranslate" style="float: right;">
<button style="margin-top: -5%" background-color="#357ae8" type="button" class="btn btn-success" onclick="check()">Download file</button>
<button style="margin-top: -5%" type="button" class="btn btn-success" onclick="new_file()">New file</button>
</div>
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div class="to_be_hidden" style="overflow-y: scroll; height:600px;width: 80%;margin-left: 10%;margin-top: 2%">
<table id="trasrt" class="table table-bordered">
<thead class="notranslate">
<tr>
<th width="5%">Id</th>
<th width="10%">Start Time</th>
<th width="10%">End Time</th>
<th width="35%">Orignal Text</th>
<th width="45%">Translated Text</th>
</tr>
</thead>
<?php
foreach($subs as $sub) {
# The text to translate
$text = $sub->text;
$text=utf8_encode($text);
?>
<tbody>
<tr>
<td class="notranslate">
<?php echo $sub->number; ?>
</td>
<td class="notranslate">
<?php echo $sub->startTime; ?>
</td>
<td class="notranslate">
<?php echo $sub->stopTime; ?>
</td>
<td class="notranslate">
<?php echo $text; ?>
</td>
<td contenteditable="">
<?php echo $text; ?>
</td>
</tr>
</tbody>
<?php
}
?>
</table>
</div></div>
<br>
<br>
<hr size="5" style="border: 1px solid black">
<section class="notranslate">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="img/icon-edit.png" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-8"></div>
</div>
</div>
</div>
</section>
<section class="notranslate">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="p-5">
<img class="img-fluid rounded-circle" src="img/icon-goole-translate.png" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="p-5">
</div>
</div>
</div>
</div>
</section>
<section class="notranslate">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="img/icon-srt.png" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-black">
<div class="container">
<!-- /.container -->
</footer>
<a id="dnl" href="" download hidden>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
<script type="text/javascript">
function check() {
var php_var = "<?php echo $file_name; ?>";
var table = document.getElementById('trasrt');
var jsonArr = [];
for (var i = 1, row; row = table.rows[i]; i++) {
var col = row.cells;
var jsonObj = {
id: col[0].innerText,
start: col[1].innerText,
end: col[2].innerText,
text: col[4].innerText
}
jsonArr.push(jsonObj);
}
var trasrt = JSON.stringify(jsonArr);
$.ajax({
type: "POST",
url: "generate.php",
data: {
data: trasrt,
file: php_var
},
cache: false,
success: function(data) {
document.getElementById("dnl").href=data;
document.getElementById('dnl').click();
}
});
}
</script>
<script type="text/javascript">
function new_file() {
document.getElementsByClassName('to_be_hidden')[0].style.visibility = 'hidden';
document.getElementsByClassName('to_be_hidden')[1].style.visibility = 'hidden';
document.getElementById('to_be_shown').style.display = 'block';
}
</script> <script type="text/javascript">
Dropzone.options.uploadWidget = {
accept: function(file, done) {
var extension = file.name.split(".").slice(-1)[0];
if ( extension == "srt") {
done();
}
else {
done("Only srt files are supported");
}
},
paramName: 'file',
maxFiles: 1,
init: function() {
this.on('success', function( file, resp ){
window.location.href = 'translate.php?srt='+file.name;
});
}
};
</script>
</html>