randomtime
Neues Mitglied
Hallo liebes Forum!
Ich hoffe als neuer Benutzer gleich alles richtig zu machen. Wenn nicht, bin ich jederzeit für konstruktive Vorschläge dankbar.
Ich möchte an dieser Stelle noch erwähnen, das mir mit Hinweisen nicht geholfen ist, da ich kaum Programmierkenntnisse habe, diese Aufgabe aber beruflich lösen muss.
Ich habe eine durchsuchbare Tabelle mit ca. 300 Werten bzw. kurzen, verlinkten Texten.
Diese Texte würde ich gerne nach einem zufälligem oder festem Schema sichtbar machen.
Dies ist eine stark verkürzte Version meiner Tabelle:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-deep-orange.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<script type="text/javascript">
function addDays(days){
var d = new Date();
d.setDate(d.getDate()+days);
return d;
}
function setDates(){
document.getElementById('date').innerHTML = addDays(0).toLocaleDateString();
}
</script>
<body onload="setDates()">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 14px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #ff5722;
padding: 12px;
text-decoration: none;
font-size: 16px;
color: white;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #ff5722;
}
</style>
<body>
<!-- Header -->
<header class="w3-container w3-padding-32 w3-center w3-theme">
<button class="w3-btn w3-large w3-theme-dark w3-round-xxlarge"style="font-weight:900;">Last Update: <a id="date"></a></button>
</div>
</div>
</header>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Sec... finds Secretary, Rec finds Receptionist and so on "title="Search">
<ul id="myUL">
<li><a href="https://www.html.de" target="_blank"><b>Administrative Coordinator - Southampton</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Operations Manager - Brighton-and-Hove</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Executive Assistant - Kettering</b></a></li>
</ul>
</body>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li.getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li.style.display = "";
} else {
li.style.display = "none";
}
}
}
</script>
<!-- Footer -->
<footer class="w3-container w3-theme">
<div class="w3-container w3-padding-16 w3-theme">
<a>Copyright:</a> <a id="year"></a> / <a id="year2"></a>
</div>
<script>
var d = new Date();
document.getElementById("year").innerHTML = d.getFullYear()- 8;
document.getElementById("year2").innerHTML = d.getFullYear();
</script>
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
</div>
</body>
</html>
Ich habe zur Veranschaulichung drei Werte übrig gelassen, die an drei verschiedenen Tagen des jeweiligen aktuellen Monats sichtbar sein sollen.
Also der erste Wert immer am ersten eines Monats, der zweite am zweite, der dritte am dritten, usw.
Die Verlinkung auf https://www.html.de dient nur der Veranschaulichung.
Wenn ich meine ca. 300 Werte dann durch max. 31 Tage eines Monats teile, wären dort immer ca. 10 Werte sichtbar, abhängig vom jeweiligen Tag.
Ich wäre euch für ein komplettes Script dankbar.
Liebe Grüsse
Markus
Ich hoffe als neuer Benutzer gleich alles richtig zu machen. Wenn nicht, bin ich jederzeit für konstruktive Vorschläge dankbar.
Ich möchte an dieser Stelle noch erwähnen, das mir mit Hinweisen nicht geholfen ist, da ich kaum Programmierkenntnisse habe, diese Aufgabe aber beruflich lösen muss.
Ich habe eine durchsuchbare Tabelle mit ca. 300 Werten bzw. kurzen, verlinkten Texten.
Diese Texte würde ich gerne nach einem zufälligem oder festem Schema sichtbar machen.
Dies ist eine stark verkürzte Version meiner Tabelle:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-deep-orange.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<script type="text/javascript">
function addDays(days){
var d = new Date();
d.setDate(d.getDate()+days);
return d;
}
function setDates(){
document.getElementById('date').innerHTML = addDays(0).toLocaleDateString();
}
</script>
<body onload="setDates()">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 14px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #ff5722;
padding: 12px;
text-decoration: none;
font-size: 16px;
color: white;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #ff5722;
}
</style>
<body>
<!-- Header -->
<header class="w3-container w3-padding-32 w3-center w3-theme">
<button class="w3-btn w3-large w3-theme-dark w3-round-xxlarge"style="font-weight:900;">Last Update: <a id="date"></a></button>
</div>
</div>
</header>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Sec... finds Secretary, Rec finds Receptionist and so on "title="Search">
<ul id="myUL">
<li><a href="https://www.html.de" target="_blank"><b>Administrative Coordinator - Southampton</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Operations Manager - Brighton-and-Hove</b></a></li>
<li><a href="https://www.html.de" target="_blank"><b>Executive Assistant - Kettering</b></a></li>
</ul>
</body>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li.getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li.style.display = "";
} else {
li.style.display = "none";
}
}
}
</script>
<!-- Footer -->
<footer class="w3-container w3-theme">
<div class="w3-container w3-padding-16 w3-theme">
<a>Copyright:</a> <a id="year"></a> / <a id="year2"></a>
</div>
<script>
var d = new Date();
document.getElementById("year").innerHTML = d.getFullYear()- 8;
document.getElementById("year2").innerHTML = d.getFullYear();
</script>
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
<div class="w3-container w3-theme w3-padding-64">
</div>
</body>
</html>
Ich habe zur Veranschaulichung drei Werte übrig gelassen, die an drei verschiedenen Tagen des jeweiligen aktuellen Monats sichtbar sein sollen.
Also der erste Wert immer am ersten eines Monats, der zweite am zweite, der dritte am dritten, usw.
Die Verlinkung auf https://www.html.de dient nur der Veranschaulichung.
Wenn ich meine ca. 300 Werte dann durch max. 31 Tage eines Monats teile, wären dort immer ca. 10 Werte sichtbar, abhängig vom jeweiligen Tag.
Ich wäre euch für ein komplettes Script dankbar.
Liebe Grüsse
Markus
