HTML5紅包頁面代碼
在當前社交化的移動互聯網時代，莫過于以紅包等激勵手段來促進用戶的參與。下面我們來看一下如何使用HTML5編寫一個簡單的紅包頁面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>紅包頁面</title>
<style>
/*樣式*/
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.red-envelopes {
width: 80%;
margin: 10% auto;
background-color: #fff;
box-shadow: 0px 0px 5px 0px #ccc;
text-align: center;
padding: 20px;
border-radius: 5px;
}
.red-envelopes h3 {
font-size: 24px;
color: #565656;
font-weight: normal;
margin-bottom: 10px;
}
.red-envelopes button {
width: 50%;
border: 0;
padding: 12px;
margin-top: 20px;
cursor: pointer;
background-color: #E64340;
color: #fff;
font-size: 18px;
border-radius: 5px;
}
.red-envelopes button:hover {
background-color: #CB3936;
}
</style>
</head>
<body>
<div class="red-envelopes">
<h3>恭喜您獲得一個紅包</h3>
<p>領取金額：<span id="amount">10</span>元</p>
<button id="receiveBtn">馬上領取</button>
</div>
<script>
//JS
document.getElementById("receiveBtn").addEventListener("click", function() {
var amount = document.getElementById("amount");
amount.innerHTML = Math.floor(Math.random() * 20) + 1;
});
</script>
</body>
</html>上面的代碼中，我們通過HTML5和CSS3創建了一個簡單的紅包頁面。頁面中心的區域顯示著紅包的金額，而用戶可以通過點擊“馬上領取”按鈕來領取紅包。值得一提的是，我們在JavaScript中通過Math.random()方法來生成不同的紅包金額。
以上就是一個簡單的HTML5紅包頁面的代碼，通過這個簡單的頁面，可以體驗到HTML5的強大功能和CSS3的精妙樣式，相信能夠為我們的網頁設計和開發工作提供很多的幫助。