Javascript 要在同一文件夹中的其他html页面中显示一个html页面的图像计数吗_Javascript_Jquery_Html_Css

Javascript 要在同一文件夹中的其他html页面中显示一个html页面的图像计数吗

javascript jquery html css

Javascript 要在同一文件夹中的其他html页面中显示一个html页面的图像计数吗,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如何获取第1页中显示在第2页中的图像数第1页： <!doctype html> <html> <head> <title>images count</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <script&

如何获取第1页中显示在第2页中的图像数

第1页：

<!doctype html>
<html>     
<head>         
<title>images count</title>         
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>         <script>            
 $(document).ready(function(){
               $("#count").html($(".galery img").length);            
 });          
</script>     
</head>      
<body>        
 <div id="box">            
 <p style="padding: 20px;">Images Count:<span id="count"></span></p>   
</div>        
<div class="galery">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
</div>      
 </body> 
</html>


图像计数
$（文档）.ready（函数（）{
$（“#count”）.html（$（“.galery img”）.length）；
});          
图像计数：

第2页：

<!doctype html>
<html>   
  <head>       
  <title></title>    
 </head>      
<body>         
Page1 Images count:<span id="newcount"></span>      
</body>
 </html>


第1页图像计数：

您可以为此使用本地存储：

第1页：

<!doctype html>
<html>     
<head>         
<title>images count</title>         
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js></script>         
<script>            
 $(document).ready(function(){
     localStorage.setItem("count", $(".galery img").length);            
 });          
</script>     
</head>      
<body>        
 <div id="box">            
 <p style="padding: 20px;">Images Count:<span id="count"></span></p>   
</div>        
<div class="galery">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
</div>      
 </body> 
</html>


图像计数
将图像计数作为参数发送
第1页

图像计数
$（文档）.ready（函数（）{
$（“#count”）.html（$（“.galery img”）.length）；
$（“.spage”）。单击（函数（）{
window.location.href=”file:///C:/Users/**/Desktop/page02.html？count=“+$（“.galery img”）.length；
})         
});          
图像计数：第二页

第2页

第1页图像计数：
$.urlParam=函数（名称）{
var results=newregexp（'[\？&]'+name+'=（[^&\]*））.exec（window.location.href）；
返回结果[1]| | 0；
}
var imageCount=$.urlParam（'count'）；
$（“#newcount”）.html（imageCount）
在不使用本地存储的情况下，可以将一个页面的类或id调用到另一个页面。不！HTML页面无法访问彼此的DOM。@Vinod Bhavnani/JoostS，仅用于上述问题，如果我的数据库名称为“test”。我该如何写代码，请帮我解决这个问题this@Saif写入数据库取决于您使用的后端语言和使用的数据库。通常对于这样一个小问题，我不建议使用数据库。为什么要使用数据库表和记录来存储图像的数量。HTML5 localstorage和sessionstorage正是出于这个原因。在浏览器上存储相对较少的数据量，而不是使用数据库。为此使用数据库会带来很多开销，而且我看到您正在使用非常旧的技术来构建应用程序。我更愿意使用一些MVC或MVVP框架来构建单页应用程序，您可以在其中维护应用程序的状态。这是一个巨大的学习曲线，但它在许多方面都非常有益。您可以使用localStorage进行此操作，或者如果页面共享相同的javascript文件，那么您可以在第一个文件中创建一个全局变量，第二个文件可以直接访问它。@Karan Dhir，请向我提供一些源代码。
<!doctype html>
<html>   
  <head>       
  <title></title> 
<script>            
 $(document).ready(function(){
     var count = localStorage.getItem("count");
      $("#count").html(count)      
 });          
</script>    
 </head>      
<body>         
    Page1 Images count:<span id="newcount"></span>      
</body>
</html>

<html>     
<head>         
<title>images count</title>         
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>         <script>            
 $(document).ready(function(){
               $("#count").html($(".galery img").length);   

               $(".spage").click(function(){

window.location.href="file:///C:/Users/**/Desktop/page02.html?count="+$(".galery img").length;

})         
 });          
</script>     
</head>      
<body>        
 <div id="box">            
 <p style="padding: 20px;">Images Count:<span id="count"></span></p>   <a class="spage"> second page</a>
</div>        
<div class="galery">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
</div>  

 </body>
</html>

<html>   
  <head>       
  <title></title>    
 </head>      
<body>         
Page1 Images count:<span id="newcount"></span>      
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}
var imageCount = $.urlParam('count');  

$("#newcount").html(imageCount)
</script>
</body>


 </html>