代码之家 › 专栏 › 技术社区 › Eliable

使点击计数器和进度条协同工作

css jquery html javascript

Eliable · 技术社区 · 5 月前

我有一个点击计数器,由于某种原因,无论我做什么,我都无法让它计算点击次数,我还希望进度条根据按钮的点击量来获取它的值。(当然,我希望能够在另一个页面上点击以下按钮并拥有计数器” 你会看到这个红色的 “进入账户信息页面)。

我的理解是,如果从脚本调用它,无论按钮在哪个页面上,它都应该能够检索信息并将计数应用于成就。

有人能帮我看看吗。

(我知道我在这里问了很多关于背景的问题,我不是一个程序员,在我仅有的一点业余时间里,我需要花很多时间才能实现我所拥有的东西,我最初是和一个朋友一起开始构建我的网站的,他在离开项目之前教我)

如果你想看看我的codepen,这可能会更好地理解: https://codepen.io/Elixble/pen/gbYXBjR

摘要:进度条可以工作,它只需要从计数器中获取数据,但计数器不起作用

HMTL

<body id="Background">
  <div id="SettingsBox">
    <div>

  <button id="follow-button" class="main-button" userFollowed="$profile->username" onclick ="clickCounter()"><span>Follow</span></button> 
      
<div class=achievements-levels-Container>
  <div class=subtitle> 
    <text class=number-one>Level 1</text> 
  </div>
  
<div class=achievement-the-starter>
  <text class=thestartertext>The Starter</text>
  <h1 id="clicks">0</h1>
 <text class=tasks-text>Follow    /5 Other User</text>
  <div class="progress">
    <div class="progress__fill"></div>
  </div>
</div>
  
<div class=subtitle> 
  <text class=number-Two>Level 2</text> 
</div>
<div class=achievement-gains>
  <text class=thegains>Gains</text>
  <text class=tasks-text>Gain 0/10 Followers</text> 
</div>
  
<div class=subtitle> 
  <text class=number-Three>Level 3</text> 
</div>
<div class=achievement-connect>
  <text class=thegains>Connect</text>
  <text class=tasks-text>Connect Accounts</text> 
</div>
</div>
</body>

CSS

.achievements-levels-Container
{
    position:absolute;
    display: grid;
    height:300px;
    width: 425px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #1616167c;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: hidden;
    overflow-y: auto;
    left: 615px;
    Top: 30px;
    align-content: center;
}


.subtitle
{
  position: relative;
    display: grid;
  left: 15px;
  top:35px;
}



.number-one
{
  Margin-top: 30px;
    display: grid;
    font-family:Montserrat;
  font-size: 18px;
  color: #c2c2c2;
  font-weight: bold;
  margin-bottom: 10px;
}

.number-Two
{
    display: grid;
    font-family:Montserrat;
  font-size: 18px;
  color: #c2c2c29f;
  font-weight: bold;
  margin-bottom: 10px;
}

.number-Three
{
    display: grid;
    font-family:Montserrat;
  font-size: 18px;
  color: #c2c2c29f;
  font-weight: bold;
  margin-bottom: 10px;
}

.tasks-text
{
  position:relative;
    display: grid;
    font-family:Montserrat;
  font-size: 18px;
  color: #c2c2c29f;
  font-weight: none;
  text-align: center;
  bottom:4px;
  
}

.achievement-the-starter
{
    position:relative;
    display: grid;
    resize: none;
    height:60px;
    width: 384px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #161616a6;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: hidden;
    overflow-y: hidden;
    left: 10px;
    top: 40px;
}

.thestartertext
{
    display: grid;
    font-family:Montserrat;
    font-size: 20px;
    color: #b92525;
    text-align: center;
}

.achievement-gains
{
    
    position:relative;
    display: grid;
    resize: none;
    height:60px;
    width: 385px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #161616a6;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    overflow-y: auto;
    left: 10px;
    top: 40px;
}

.thegains
{
    display: grid;
    font-family:Montserrat;
    font-size: 20px;
    color: #9b2a2a;
    text-align: center;
}

.achievement-connect
{
    
    position:relative;
    display: grid;
    resize: none;
    height:60px;
    width: 385px;
    padding: 10px;
    margin-bottom: 50px;
    border-radius: 10px;
    background-color: #161616a6;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    overflow-y: auto;
    left: 10px;
    top: 40px;
}

.connect
{
    display: grid;
    font-family:Montserrat;
    font-size: 20px;
    color: #9b2a2a;
    text-align: center;
}


.progress
{
  position:absolute ;
  display:grid;
  width:410px;
  height:15px;
  background: #9b2a2a62;
  border-radius: 40px;
  overflow: hidden;
  bottom:-8px;
}

.progress__fill
{
  width: 20%;
  height: 100%;
  background: #9b2a2a;
  transition: all, 1s;
}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #9b2a2a00 #40404000;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #40404000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #9b2d2d;
    border-radius: 10px;
    border: 3px none #ffffff00;
  }

#follow-button
{
    position:relative;
    width:75px;
    height:30px;
    margin-right:6px;
    line-height:0px;
    outline:none;
}

body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position: absolute;
  margin: auto;
}

#clicks
{
  position:absolute;
    display: grid;
    font-family:Montserrat;
  font-size:18px;
  color: #9d2a2a;
  font-weight: bold;
  text-align: center;
  top:25px;
  left:176px;
  
}

function updateProgressBar(progressBar, value) {
  value = Math.round(value);
  progressBar.querySlector(".progress__fill").style.width = `${value}%`;
}

Var clicks = 0
function clickCounter(){
    clicks += 1
    .document.getElementById.("clicks").innerHTML = clicks + "clicks"}

2 回复 | 直到 5 月前

Ray Wallace 5 月前

你把var拼错了(它没有大写)。你有两只流浪狗。”行中的s(点)用于设置.innerHTML

将你的js修改为:

var clicks = 0
function clickCounter(){
    clicks += 1
    document.getElementById("clicks").innerHTML = clicks
}

至于在另一个网页上提供点击次数,您需要考虑使用localStorage。

FHocs 5 月前

你的代码笔不完整,你在用php吗?jquery?现在它只是返回: .document.getElementById.("clicks").innerHTML = clicks + "clicks" 是无效的方法调用