【笔记】老韩HTML中的24讲作业输出菱形

[code]
/*
* 2*1-1;
*** 2*2-1;
***** 2*3-1;
*******2*4-1;
*/
//菱形;
var n=window.prompt("请输入一个整数:");
//菱形上半部分;
for (var i=1; i<=n; i++){
for(var j =1;j<=n-i;j++){
document.write("&nbsp");
}
for(var j=1; j<=2*i-1;j++){
document.write("*");
}
for(var j=1;j<=n-i; j++){
document.write(" ");
}
document.write("<br/>");
}
//菱形下半部分;
for (var i=1;i<=n;i++){
for (var j=1; j<=i;j++){
document.write("&nbsp");
}
for (var j=1; j<=2*n-1-2*i;j++){
document.write("*");
}
document.write("<br />");
}
[/code]
参考资料1:http://blog.csdn.net/wenximalong/article/details/8224891
参考资料2:http://blog.csdn.net/wenximalong/article/details/8228330

第一次前端面试经验

自学web前端也有几个月了,但一直没有用过,人总是要不断的进步,不断的学习。下午去一家我认为的大公司面试了下,也是想获得一种经验,因为可能下一步我会朝着这个方向前进,二十六七岁,这个年龄说大不大,说小不小,很多事情现在应该考虑了,比如以后的方向。
去了面试公司时间不长,一个多小时,我知道我肯定没戏,因为js我才刚开始学习,有两道编程题我完全不会,当然还有一个卷面考试,我从来没见过,哈哈。一道是编写一个“现在是上午08:20:31星期三”的程序,第二道是编写一个两个表格互相交换的程序,两道第一道题前两天还刚好学过,第二道题我完全不会。
第一道:要求实现一个js获取当前时间的程序

[code]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.demo{
margin: 0px auto;
width: 200px;
background-color: #000;
height: 20px;
border: 5px solid #ccc;
padding: 5px;
color:#33FF33;
}
</style>
<script>
var myDate=new Date();
var x = '';
var h = myDate.getHours();
if (h>=18)
{
x = '晚上好!';
}
else if(h<=6)
{
x = '现在是凌晨';
}else if(h<=9)
{
x = '早上好!';
}else if(h<=12)
{
x = '上午好!';
}else{
x = '下午好!'
}
var attime;
function clock(){
var time = new Date();
var ww = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
var nWeek = time.getDay();
attime =x+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+ww[nWeek];
document.getElementById("demo").innerHTML = attime;//我上面本来只是想插入代码的,没想到居然实现了,呵呵
}
setInterval(clock,1000);
</script>
</head>
<body>
<div id="demo" class="demo"></div>
</body>
</html>
[/code]
然后当然还有第二道题:设置这两个表格的内容互相点击,然后可以交换。

content1 content2

[code]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table border="1">
<tr>
<td id="td1">content1</td>
</tr>
<tr>
<td id="td2">content2</td>
</tr>
</table>
</body>
<script>
$('#td1').click(function(){
var temp=$('#td1').text();
$('#td1').text($('#td2').text());
$('#td2').text(temp);
});
$('#td2').click(function(){
var temp=$('#td1').text();
$('#td1').text($('#td2').text());
$('#td2').text(temp);
});
</script>
</html>
[/code]
另外还有一道面试用的比较多的斐波那契数组用js表达的
[code]<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = new Array();
function fb(a,b,i){
var z = a+b;
i++;
document.write("第"+i+"位:"+z+"<br />");
if(i>100){
return;
}
fb(b,z,i)
}
fb(0,1,0)
</script>
</body>
<body>
</body>
</html>[/code]

【笔记】javascript使用按钮新窗口打开网站的五种写法

使用javascript的按钮在新窗口打开网页的写法有好几种,今天在慕课网学的时候自己想到了一种思路,然后又学习了几种比较有意思的写法。权当学习笔记了,以便往后查阅。
[code lang=”js”]<script type="text/javascript">
function openWindow(){//方法一
if(confirm("Are you sure you want to open a new window?")){
var newwindow = prompt("Enter your website:","http://www.yukisa.com");
window.open(newwindow,’_blank’,’width=400′,’height=500′,’menubar=no’,’toolbar=no’);
}
}
function openWindow(){//方法二
var abc = confirm("Are you sure you want to open a new window?");
if(abc==true){
var bcd = prompt("Enter your website:",’http://www.yukisa.com’);
}
window.open(bcd,’width=400′,’_blank’,’height=500′,’menubar=no’,’toolbar=no’);
}
function openWindow(){//方法三
var liu = confirm("are you sure open a new window?")
if(liu==true){
window.open(‘http://www.yukisa.com’,’_blank’,’width=100′,’height=100′,’meunbar=no’,’toolbar=np’);
}

}
function openWindow(){//方法四
var abc = confirm("are you sure open a new window?")
if(abc==true)
var url=prompt("Enter your website","http://www.yukisa.com");
window.open("http://www."+url,’_blank’,’width=50′,’height=50′,’meunbar=no’,’toolbar=np’);
}
function openWindow(){//方法五
var message;
var add;
message = confirm("are you sure open a new window?")
if(message==true){
add = prompt("Plese enter your website:","http://www.yukisa.com");
window.open(add,’width=50′,’height=50′,’meunbar=no’,’toolbar=np’);
}
}
</script>[/code]
五种不同的写法,但效果都是相同的,通过一个按钮来调用openWindow()函数,实现网页的打开。

需要记住的是confirm()函数,用于显示一个带有指定消息和 OK 及取消按钮的对话框。如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。
还有一个prompt()函数,用于显示可提示用户进行输入的对话框。如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

【JS/jQuery】JQuery 小练习(实例代码)

文章转载自脚本之家

1、按钮倒数10秒之后才能点击。这个效果一般在一些论坛注册时候用到比较多,废话少说,直接上代码:

复制代码 代码如下:
<!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>
<title></title>
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
<script type=”text/javascript”>
var timeOut;
var count = 10;
$(function() {
$(“#btnSubmit”).attr(“disabled”, “disabled”);
$(“#btnSubmit”).val(“确(” + count.toString() + “)定”);
timeOut = setTimeout(ButtonCount, 1000);
});
ButtonCount = function() {
if (count == 0) {
$(“#btnSubmit”).attr(“disabled”, “”);
$(“#btnSubmit”).val(“确 定”);
clearTimeout(timeOut);
}
else {
count–;
$(“#btnSubmit”).attr(“disabled”, “disabled”);
$(“#btnSubmit”).val(“确(” + count.toString() + “)定”);
setTimeout(ButtonCount, 1000);
}
}
</script>
</head>
<body>
<input type=”button” value=”确 定” id=”btnSubmit” />
</body>
</html>

2、即点即改,这个效果一个多月前还没有学jquery时觉得好酷,现在觉得其实也非常简单的东西,可以看出jquery在前端效果上大大简化了编写难度,代码如下:

复制代码 代码如下:
<!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>
<title></title>
<style type=”text/css”>
.caneditBg
{
background-color:Gray;
}
</style>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
$(“.canedit”).each(function() {
$(this).bind(“dblclick”, function() {
var html = $(this).html();
var textarea = “<textarea name=’temTextarea’ id=’temTextarea’ onblur=’saveText(this)’ >” + html + “</textarea>”;
$(this).empty().html(textarea);
});
$(this).mouseenter(function() { $(this).addClass(“caneditBg”) }).mouseleave(function() { $(this).removeClass(“caneditBg”) });
});
});
saveText = function(o) {
var text = $(o).val();
$(o).parent().empty().html(text);
}
</script>
</head>
<body>
<div class=”canedit”>
即点即改!
</div>
<div>
</div>
</body>
</html>

以上代码只需要直接copy到html文件,并且保证导入jquery.js文件无错,就可以运行。