HTML轉盤源碼
❶ html下怎麼實現轉盤式抽獎（每個獎品塊按順序亮滅，頻率越來越慢，最後停在最終獎品）而不是突然停，
思路：1.用h5技術，將每個獎品塊的顏色默認顏色為暗色；2.指針到達的獎品塊，將顏色調明，指針離開獎品塊，則回復默認顏色；3.用自定義動畫控制頻率。
❷ HTML源代碼
<style type="text/css">
#demo{height:120px;overflow:hidden;}
#demo1{float:left;}#demo2{float:left;}
#indemo{float:left; width:1000%}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">這里放你要循環的圖片</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=20; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
可以的啊，把上面代碼復制到一個新建的html中，把<img src="你的圖片" />放到代碼中就行了啊
❸ 用html5+js 做一個轉盤抽獎怎麼做，求源碼！
5分給你個程序。。。
自己參考改吧
<input type="button" value="開始旋轉" onclick="spin();" style="float: left;" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["北京", "上海", "天津", "南京",
"杭州", "深圳", "武漢", "濟南",
"重慶", "大連", "合肥", "鄭洲"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px sans-serif';
for(var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
</script>
❹ 為什麼要解析html響應的源代碼
因為通過HTML源碼解析，能夠看到當前HTML界面的JavaScript執行情況，能夠跟蹤給函數執行情況。
❺ 求html靜態網頁源碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>濺</title>
<style>
<!--
body {
background:url(img/bg9.gif);
margin:0px;
padding:0px;
}
.pic{
border:1px solid #00406c;
}
p {
padding-top:30px;
color:#001671;
}
p.con{
padding-left:4px;
padding-right:4px;
}
p.title {
paddin-top;0px;
}
.chara1 {
font-size:12px;
background-color:#90bcff;
}
.chara1 td{
text-align:center;
}
.chara2 {
background-color:#d2e7ff;
text-align:center;
font-size:12px;
vertical-align:top;
}
.chara3 {
background:#e9fbff url(img/self.jpg) no-repeat bottom right;
vertical-align:top;
padding-top:15px;
padding-left:30px;
font-size:12px;padding-right:15px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="img/banner3.jpg" border="0" /></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
<tr><td>首面</td><td>心情日記</td><td>Free</td><td>一起走到</td><td>從明天起</td><td>紙飛機</td><td>下一站</td></tr>
</table>
<table width="600px" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="150px" class="chara2"> <p><img src="img/selfpic.jpg" class="pic"/><br />我的日記本</p>
<p class="con">他們彼此深信，是瞬間並發的熱情讓他們相遇。這樣的確定是美麗的，但變幻無常更為美麗。</p>
<p> <img src="img/selfpic2.jpg" class="pic"/><br/>心情軌跡</p>
<p class="con">董事長的一切都讓人既羨慕又忌妒，但更讓人受不了的是，有一天，上蒼忽然賜給他一個神奇的禮物</p> </td>
<td class="chara3">
<h4>介紹</h4>
<p>我努力的抓緊世界，最後卻仍被世界淘汰，如果一開始就鬆手，我會不那麼傷心嗎？你說，親愛的孩子，世事難料，隨它去吧！</p>
<h4>照相本子</h4>
<p>關於童年，你記住了什麼？ <br>
兩歲時，我擁有一隻巨大的粉紅豬，它總在我嚎啕大哭時逗我笑。<br>
三歲時，我騎著小木馬一路搖到外婆家，它不喝水也不吃草。<br>
四歲時，我離家出走，在公車上睡著了，最後是太空超人送我回家。<br>
我真的沒騙你，我通通都記得，還有照片為證。
</p>
<h4>地下鐵</h4>
<p>天使在地下鐵的入口，<br>
和我說再見的那一年，<br>
我漸漸看不見了。<br>
十五歲生日的那年秋天早晨，<br>
窗外下著毛毛雨，<br>
我喂好我的貓。<br>
六點零五分，<br>
我走進地下鐵。</p>
<h4>向左走向右走</h4>
<p>They're both convinced<br>
that a sudden passion joined them.<br>
Such certainth is beautiful,<br>
but uncertainty is more beautiful still.</p>
<br>
</td>
</tr>
</table>
</body>
</html>
❻ HTML源代碼是什麼
網頁空白處點擊右鍵
查看源文件
那就是HTML代碼
用處就是以瀏覽器認識的格式
來布局網頁
這里包括圖片載入
文字樣式等等信息
你看到的東西應該在HTML里都能找到
❼ html網頁製作、跪求源代碼
❽ 怎麼樣用html做轉盤抽獎軟體
自己參考改吧
<input type="button" value="開始旋轉" onclick="spin();" style="float: left;" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["北京", "上海", "天津", "南京",
"杭州", "深圳", "武漢", "濟南",
"重慶", "大連", "合肥", "鄭洲"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px sans-serif';
for(var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
</script>
❾ 如何查看HTML源碼
在瀏覽器看到的HTML網頁，是瀏覽器解釋HTML源代碼後產生的結果。
要查看這個HTML的源代碼，有兩種方法。一是點擊滑鼠右鍵，點擊View Source(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。
利用View Source得到網頁的源代碼，你可以由此借鑒一下別人寫得好的地方。不過在你對HTML知識尚少的情況下，看別人復雜的HTML源代碼，只會讓你頭暈。建議你還是再等等，先掌握一些基礎再說。
❿ 網頁製作源碼HTML，簡單不復雜，給分謝謝
你可以看一下這個