Question

我希望每次加载页面时，我的文字下划线都会随机改变颜色。

我之前使用此脚本取得了成功：

<script type="text/javascript">
    var classes = ['red', 'blue', 'yellow'];
    var random_class = classes[Math.floor(Math.random() * classes.length)];
    var title = document.getElementById('decor');
    classes.forEach((el) => {
    title.classList.remove(el);
    });
    title.classList.add(random_class);
</script>

在我的CSS上用这个：

.red {
box-shadow: inset 0 -1.3vw 0 0 ##FF0000;
}

.yellow {
box-shadow: inset 0 -1.3vw 0 0 #FFFF00;
}

.blue {
box-shadow: inset 0 -1.3vw 0 0 #0000FF;
}

但我不能（在这里使用newb）使用我当前的代码（请参阅下面的代码段）

body {
	background-color: #FFFFFF;
	margin: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
	display: block;
	width: 85%;
	/*center vertically & horizontally*/
	position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}


a, a:visited, a:hover {
	-ms-text-align-last: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
	text-decoration: none;
  color: #000000;

}    


#test1 {
  display: inline-block;
  height: auto;
  width: auto;
  visibility: visible;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  line-height: 7.5vw;
  margin: 0;
  font-size: 7.7vw;
  font-weight: bold;
  position: relative;
}

#test1:before {
    content: "";
    box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    animation-name: stretchRight;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    z-index:-1;
}


@keyframes stretchRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

	<body>
		<div class="container">
			<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
			</div>
		</div>
	</body>

我如何将它们组合在一起以使每次页面加载时下划线都会改变颜色？

Answer 1

您可以将.red, .yellow, .blue,.etc...类添加到css，然后让javascript选择其中一个类，并将其动态添加到test1。由于可供选择的颜色数量很少，因此颜色可能会经常重复。如果要确保颜色不同，可能需要使用cookie来存储值。

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var classes = ['red', 'blue', 'yellow','green','cyan','magenta','orange','black'];
var random_index = getRandomIntInclusive(0, classes.length -1);
var title = document.getElementById('test1');
var random_class= classes[random_index];
title.classList.add(random_class);

body {
  background-color: #FFFFFF;
  margin: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  display: block;
  width: 85%;
  /*center vertically & horizontally*/
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

a,
a:visited,
a:hover {
  -ms-text-align-last: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-decoration: none;
  color: #000000;
}

#test1 {
  display: inline-block;
  height: auto;
  width: auto;
  visibility: visible;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  line-height: 7.5vw;
  margin: 0;
  font-size: 7.7vw;
  font-weight: bold;
  position: relative;
}

#test1:before {
  content: "";
  box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation-name: stretchRight;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  z-index: -1;
}

.red:before {
  box-shadow: inset 0 -1.3vw 0 0 red !important;
}

.yellow:before {
  box-shadow: inset 0 -1.3vw 0 0 yellow !important;
}

.blue:before {
  box-shadow: inset 0 -1.3vw 0 0 blue !important;
}

.green:before {
  box-shadow: inset 0 -1.3vw 0 0 green !important;
}

.cyan:before {
  box-shadow: inset 0 -1.3vw 0 0 cyan !important;
}

.magenta:before {
  box-shadow: inset 0 -1.3vw 0 0 magenta !important;
}

.orange:before {
  box-shadow: inset 0 -1.3vw 0 0 orange !important;
}

.black:before {
  box-shadow: inset 0 -1.3vw 0 0 black !important;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

<body>
  <div class="container">
    <div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a>
    </div>
  </div>
</body>

如何在每次加载页面时都使用下划线更改颜色？

1 个答案: