使用javascript绘制笑脸并在半透明div中显示
在这里,我创建了CodePanFiddle,在我的主页上显示欢迎信息 我想用“欢迎微笑”向大家展示半透明迷人的div。它应该出现15秒,然后自动消失 小提琴: 问题:使用javascript绘制笑脸并在半透明div中显示,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在这里,我创建了CodePanFiddle,在我的主页上显示欢迎信息 我想用“欢迎微笑”向大家展示半透明迷人的div。它应该出现15秒,然后自动消失 小提琴: 问题: 笑脸风格以悲伤的表情出现。我更改了半径和其他参数,但没有显示欢迎或微笑 欢迎信息应出现在笑脸旁边。现在它在下面很清楚:两者都没有帮助 整个div应该像水一样透明。改变和尝试不同的颜色并不能让你满意 整个div应该在页面加载15秒后消失,但每1秒发生一次 $( document ).ready(function() { $('#
$( document ).ready(function() {
$('#d1').fadeOut();
$('#d1').val='';
},150000);
非常感谢您的帮助。请使用Javascript.setInterval()函数执行以下操作:
$( document ).ready(function() {
window.setInterval(function(){
$( "#d1" ).fadeOut( "slow", function() {
//Do things when Animation is complete.
});
},15000);
});
你可以这样做,带欢迎信息的笑脸会在页面加载15秒后消失 HTML
<div id="d1" style="height:100px; width:100px; background-color:white">
<div id="mydiv" style="display:none">
<table>
<tr>
<td>
<canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE">
</canvas>
</td>
<td>
<p style="position:absolute; background-color:rgba(255,0,255,0.5);; filter:alpha(opacity=50); opacity:.5; padding:5px">
welcome to xyz.com!
Please review the site and give your valuable feedback.
</p>
</td>
</tr>
</table>
</div>
</div>
工作谢谢,你能告诉我如何在右手边的微笑旁显示欢迎信息吗side@Karimkhan我没听懂你的话,
在右手边的微笑旁边
我对小large的欢迎信。我还想以夸张的形式展示一些这方面的说明。所以我想在smiley的右边显示文本。你现在拿到了吗?@Karimkhan我根据你的要求更新了答案
和小提琴
,检查一下你的努力。这里我根据需要编辑。若你们能帮我在画布中央画一个圆圈,在“``的顶部画一个文字,我将不胜感激。相反,它出现在底部/下方
$( document ).ready(function() {
//var canvas = document.getElementById("myDrawing");
var a_canvas = document.getElementById("myDrawing");
var context = a_canvas.getContext("2d");
// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";
// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();
// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();
// Draw the mouth
context.beginPath();
context.arc(95, 95, 17, Math.PI , 2*Math.PI,true);
context.closePath();
context.fill();
// Write "Hello, World!"
context.font = "20px Garamond";
context.fillText("welcome to xyz.com! ",15,175);
$( "#mydiv" ).fadeIn( 15000, function() {
$( "#myDrawing" ).fadeIn( 15000 );
});
});