零基础前端入门最佳实践班 扫二维码继续学习 二维码时效为半小时

(0评价)
价格: 399.00元

        <script type="text/javascript">
            var url='nodeing.com'
            var html_template='<div style="color:red">哈哈哈,'+url+'</div>'
            document.body.innerHTML=html_template
            //字符串的长度;
            alert(html_template.length)
        </script>

[展开全文]
aett1988 · 11-01 · 0

 Demo代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180820 Demo5.5 JS Practice</title>
	</head>
	<body>
		<script type="text/javascript">
			var sum = 0
			function sum1(m,n){
			for(i = m;i <= n;i++){
				sum += i
			}
				alert(sum)
			}
			sum1(1,100)
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-20 · 0

大于90分 为优秀

大于60分 为及格

低于60分 则为不及格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180814 Demo3.9 JS Practice</title>
	</head>
	<body>
		<input type="text" id="ipt" />
		<button id="btn">检查</button>
		<script type="text/javascript">
			var oIpt = document.getElementById("ipt")
			var oBtn = document.getElementById("btn")
			oBtn.onclick = function(){
				var num = oIpt.value
				if(num >=90){
					alert("优秀")
				}else if(num >= 60){
					alert("及格")
				}else{
					alert("不及格")
				}
			}
		</script>	
	</body>
</html>

 

[展开全文]
针针 · 08-14 · 0

 引用了Bootstrap 3的示例格式 基本逻辑没有问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180810 Demo3.8 JS Practice</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<style type="text/css">
			form{
				width: 50%;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
	<form>
		<div class="form-group">
			<label for="exampleInputEmail1">QQ账号</label>
			<input type="text" class="form-control" id="account" placeholder="QQ账号">
		</div>
		<div class="form-group">
			<label for="exampleInputPassword1">QQ密码</label>
			<input type="password" class="form-control" id="password" placeholder="QQ密码">
		</div>  
		<button type="submit" class="btn btn-default" id="btn">登陆</button>
	</form>
	<script type="text/javascript" src="Demo3.8.js" ></script>
	</body>
</html>

 

var oAccount = document.getElementById("account")
var oPassword = document.getElementById("password")
var oBtn = document.getElementById("btn")
oBtn.onclick = function(){
	if( oAccount.value.length <5 || oAccount.value.length>11 ){
		alert("QQ号码长度不正确")
		return
	}
	var oAccount_Value = Number(oAccount.value)
	if (isNaN(oAccount_Value)){
		alert("QQ号码格式不正确")
		return
	}
	if (oPassword.value.length <6 || oPassword.value.length >16){
		alert("密码位数不正确")
		return
	}
	if(oAccount.value == "756876988" && oPassword.value =="123456"){
		alert("登陆成功")
	}else{
		alert("登陆失败,请核对账号和密码")
	}
}

 

[展开全文]
针针 · 08-10 · 0

需要注意的是JS外部引入的方法

<script type="text/javascript" src="Demo3.6.js"></script>   

HTML 部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180809 Demo3.6 JS Practice</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			#photo{
				width: 100%;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<img id="photo" src="../img/03.jpg">
		<button id="last">上一张</button>
		<button id="next">下一张</button>
		<script type="text/javascript" src="Demo3.6.js"></script>	
	</body>
</html>

JS部分

var oLast = document.getElementById("last")
var oNext = document.getElementById("next")
var oPhoto = document.getElementById("photo")
var photonumber = 3

oLast.onclick = function(){
	photonumber -- 
	if(photonumber <= 0){
		oPhoto.src = "../img/01.jpg"
	}else{
		oPhoto.src = "../img/0"+photonumber+".jpg"
	}
}
oNext.onclick = function(){
	photonumber ++ 
	if(photonumber >= 5){
		oPhoto.src = "../img/05.jpg"
	}else{
		oPhoto.src = "../img/0"+photonumber+".jpg"
	}
}

 

[展开全文]
针针 · 08-09 · 0

 实现了加减 最少不能为0  最多不能超过99

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180809 Demo3.5 JS Practice</title>
	</head>
	<body>
		<button id="btn1">-</button>
		<input type="text" value="10" id="ipt1" />
		<button id="btn2">+</button>
		<script type="text/javascript">
			var oBtn1 = document.getElementById("btn1")
			var oBtn2 = document.getElementById("btn2")
			var oIpt1 = document.getElementById("ipt1")
			oBtn1.onclick = function(){
				var oIpt2 = oIpt1.value
				oIpt2 --
				if(oIpt2 == 0){
					oIpt1.value=1		
				}else{
					oIpt1.value = oIpt2
				}
			}		
			oBtn2.onclick = function(){
				var oIpt3 = oIpt1.value
				oIpt3++
				if(oIpt3 == 99){
					oIpt1.value=99
				}else{   //英文拼写要注意!
					oIpt1.value= oIpt3
				}
			}		
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-09 · 0

 作业代码 嘻嘻嘻

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180808 Demo3.3 JS Practice</title>
	</head>
	<body>
		<script type="text/javascript">
		//下面是转换布尔值后为FALSE的情况
			var a = ""
			var b = null
			var c = undefined
			var d = NaN
			var aa = Boolean(a)
			var bb = Boolean(b)
			var cc = Boolean(c)
			var dd = Boolean(d)
			console.log(aa,bb,cc,dd)
			//下面是数字类型转换的集中方法
			var e = "123"
			var f = "123.45"
			var g = "1234"
			var ee = parseInt(e) //这个是把字符串转换成Int整数类型
			var ff = parseFloat(f) //这个是把字符串转换成Float浮点数类型
			var gg = Number(g) // 这个是强制转换成数字类型
			console.log(ee,ff,gg)
		</script>
		<script type="text/javascript">
			//下面是作业5第一题
			var a ="abc"
			var a1 = parseInt(a)
			var a2 = Boolean(a)
			var a3 = String(a)
			console.log(a1,a2,a3)
		</script>
		<script type="text/javascript">
			//下面是作业5第二题
			var a ="123"
			var a1 = parseInt(a)
			var a2 = Boolean(a)
			var a3 = String(a)
			console.log(a1,a2,a3)
		</script>
		<script type="text/javascript">
			//下面是作业5第三题
			var a = true;
			var a1 = parseInt(a)
			var a2 = Boolean(a)
			var a3 = String(a)
			console.log(a1,a2,a3)
		</script>
		<script type="text/javascript">
			//下面是作业5第四题
			var a = underfined;
			var a1 = parseInt(a)
			var a2 = Boolean(a)
			var a3 = String(a)
			console.log(a1,a2,a3)
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-08 · 0

 Demo代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180808 Demo3.1 JS Practice</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			#box{
				width: 100px;
				height: 100px;
				background-color: orange;
				margin: 20px auto;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="btn">开关</button>
		<div id="box"></div>
		<script type="text/javascript">
			var oBtn = document.getElementById("btn")
			var oBox = document.getElementById("box")
			var flag = false
			oBtn.onclick = function(){
				if(flag == true){
					oBox.style.display = "block"
				}
				if(flag == false){
					oBox.style.display ="none"
				}
				flag = !flag
			}
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-08 · 0

最简陋版本的计算器了 在加法的时候遇到了困难 需要将string类型转变为number类型 否则就变成字符串相加了

<!DOCTYPE html>
<html>
	<head>
		<!--
			更新日志
			180807 完成最简单的加减乘除功能
		-->
		<meta charset="UTF-8">
		<title>180807 Demo2.9 JS Practice</title> <!--制作一个简单的计算器-->
		<style type="text/css">
			body{
				text-align: center;
				margin: 100px auto;
			}
			#result{
				width: 150px;
				height: 25px;
				margin: 10px auto;
				border: 1px solid #ccc;
			}
			span{
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<span>第一个数</span><input type="text" id="ipt1"/>
		<span>第二个数</span><input type="text" id="ipt2"/>
		<div id="result"></div>
		<button id="btn1">+</button>
		<button id="btn2">-</button>
		<button id="btn3">*</button>
		<button id="btn4">/</button>
		<script type="text/javascript">
			var oIpt1 = document.getElementById("ipt1")
			var oIpt2 = document.getElementById("ipt2")
			var oBtn1 = document.getElementById("btn1")
			var oBtn2 = document.getElementById("btn2")
			var oBtn3 = document.getElementById("btn3")
			var oBtn4 = document.getElementById("btn4")
			var oResult = document.getElementById("result")
			oBtn1.onclick = function(){
				var num1 = Number(oIpt1.value) //需要把字符串转换成数字
				var num2 = Number(oIpt2.value)
				var num3 = num1 + num2
				oResult.innerHTML = num3
			}
			oBtn2.onclick = function(){
				var num1 = oIpt1.value
				var num2 = oIpt2.value
				var num3 = num1 - num2
				oResult.innerHTML = num3
			}
			oBtn3.onclick = function(){
				var num1 = oIpt1.value
				var num2 = oIpt2.value
				var num3 = num1 * num2
				oResult.innerHTML = num3
			}
			oBtn4.onclick = function(){
				var num1 = oIpt1.value
				var num2 = oIpt2.value
				var num3 = num1 / num2
				oResult.innerHTML = num3
			}
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-07 · 0

 大于或等于60就是及格 其他为不及格

<html>
	<head>
		<meta charset="UTF-8">
		<title>180807 Demo2.8 JS Practice</title>
	</head>
	<body>
		<input type="text" id="ipt1" />
		<button id="btn">检查成绩</button>
		<script type="text/javascript">
			var oIpt1 = document.getElementById("ipt1")
			var oBtn = document.getElementById("btn")
			oBtn.onclick = function(){
				if(oIpt1.value < 60){
					alert("不及格")
				}else{
					alert("及格")
				}
			}
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-07 · 0

解决了之前尴尬的做法

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180807 Demo2.4 JS Practice</title>
		<style type="text/css">
			body{
				text-align: center;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p id="p1">这是一段文字</p>
		<button id="btn1">+</button>
		<button id="btn2">-</button>
		<script type="text/javascript">
			var op = document.getElementById('p1')
			var oBtn1 = document.getElementById('btn1')
			var oBtn2 = document.getElementById('btn2')
			var fontsize = 30
			oBtn1.onclick = function(){
				fontsize = fontsize + 2
				op.style.fontSize = fontsize +"px" ; 
			}
			oBtn2.onclick = function(){
				fontsize = fontsize - 3 
				op.style.fontSize = fontsize + "px"
			}
		</script>
	</body>
</html>

 

[展开全文]
针针 · 08-07 · 0

 一直以来没有分享过笔记 感觉印象不深刻 从这一节课以后就开始记录一下吧

如何计算个位数呢

解决方法大概就是用这个三位数 去除以10 得到的余数就是这个三位数的个位数

实现的代码片段如下 仅供参考啦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>180807 Demo2.7 JS Practice</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			#result{
				width: 50%;
				height: 100px;
				border: 1px solid #ccc;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<input type="text" id="ipt" />
		<button id="btn">计算个位数字</button>
		<div id="result"></div>
		<script type="text/javascript">
			var oIpt = document.getElementById("ipt")
			var oBtn = document.getElementById("btn")
			var oResult = document.getElementById("result")
			oBtn.onclick = function(){
				var num1 = oIpt.value
				var num2 = (num1 % 10)
				oResult.innerHTML = num2
			}
		</script>
	</body>
</html>

 

 

[展开全文]
针针 · 08-07 · 0

其他选择器

  • id选择器
  • 类选择器
  • 标签选择器

相邻选择器

  • + 后面某个相邻的元素
  •  
[展开全文]
ykchibinggan · 04-24 · 0

子元素选择器

  • >
  • 选择符合条件的子元素
  • 子元素选择器只能选中下一层,
[展开全文]
ykchibinggan · 04-03 · 0

多元素选择器

  • 选择具有相同
[展开全文]
ykchibinggan · 04-02 · 0

绝对定位

  • absolute
  • 参照物:1上级元素中由定位属性(position)的
  •               2 并且找的是最近的那个有定位属性的
  •  
[展开全文]
ykchibinggan · 03-28 · 0

float:左右布局

margin:盒子之间的距离

定位 position

  • 定位  固定位置
  • 可以把元素摆放到任意位置
  • 左右的导航栏

相对定位

  • relative   需要参照物 
  • 要使位置变化还需要一个偏移量
  •  

 

[展开全文]
ykchibinggan · 03-28 · 0

<div class="clear"><div/>

.class{  clear=both;}

 

 

[展开全文]
ykchibinggan · 03-25 · 0