js变量:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a='darren'
var v=a.charAt(0) //取第几个值
var c=b.string(0,2) //取值得区间,起始位置
alert(c)
</script>
</head>
<body>
</body>
</html>
展示:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1(){
}
//var a=fun1();
//alert (a)
//console.log(a)
var a={name:'darren',action:'go out'};
console.log(a)
</script>
</head>
<body>
</body>
</html>
js函数调用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>热烈欢迎国家主席莅临指导!</title> <script type="text/javascript"> function fun(){ x=document.getElementById('test'); x.innerHTML="傻x"; } function fun1(){ var result=window.confirm('是否跳转?') console.log(result) } function fun2(){ var result=window.confirm('是否跳转?') if (result){ window.location.reload="https://www.baidu.com" } else { window.location.reload="https://www.taobao.com" } } function fun3(){ document.οndblclick=function(){ //空白页面双击事件后反应 alert('hello'); } } //display="none" //注册的视频可以播放,只需按F12隐藏即可 function fun4(){ var s=setInterval("console.log('stop')",1000) clearInterval(s) } function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) console.log(sub) document.title = sub + firstChar; } setInterval('Go()',1000); </script> </head> <!--检测网站页面是否加载完毕--> <body οnlοad="alert('hello')"> <!--onbeforeunload只有在body标签中才有效,可以防止误关闭--> <body οnbefοreunlοad="window.event.returnValue='是否要退出?'"> <h1 id="test" align="center">这里有个美女</h1> <div align="center" οnclick="fun()">点击查看</div> <div οnclick="fun2()">xxx</div> <div οnclick="fun3()">yyy</div> <div>zzz</div> <input type="button" value="点击查看" name="" οnclick="navigate('https://www.baidu.com')"> <div οnclick="fun4()">stop</div> <a οnclick="alert('走吗');returnValue false;" href="http://www.baidu.com" align="center">lianjie</a> </body> </html>
js拖图的办法:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fun1() {
var x=window.event.clientX
var y=window.event.clientY
console.log(x,y)
z=document.getElementById('test')
z.style.left=x+'px';
z.style.top=y+'px';
}
</script>
</head>
<body οnmοusemοve="fun1()">
<div id="test" style="position: absolute;">
<img src="a.jpg" style="width:50px;height:50px;" alt="p_w_picpath">
</div>
</body>
</html>
搜索框默认的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function enter(){
var id=document.getElementById('tip')
id.value=''
}
function leave(){
var id=document.getElementById('tip')
var var1=id.value;
if (var1.length==0) {
id.value='请输入关键字'
}
}
</script>
</head>
<body>
<input type="text" id="tip" value="请输入关键字" οnfοcus="enter()" οnblur="leave()">
</body>
</html>
取文本,取HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script type="text/javascript">
function intext(){
alert(document.getElementById('inner').innerText);
}
function inhtml(){
alert(document.getElementById('inner').innerHTML);
}
</script>
</head>
<body>
<a id='inner'>我是<font color='red'>红</font>色</a>
<br>
<input type='button' value='innerText' οnclick='intext()' />
<br>
<input type='button' value='innerHTML' οnclick='inhtml()' />
</body>
</html>
批量删除,表单提交:document.geElementById(‘form’).submit()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom</title>
</head>
<body>
##########################################################
<!--第一:JavaScript 能够直接写入 HTML 输出流中-->
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
##########################################################
<!--第二:能够对事件作出反应,比如对按钮的点击-->
<button type="button" οnclick="alert('Welcome!')">点击这里</button>
###########################################################
<!--第三:JavaScript 能改变 HTML 元素的内容-->
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
###########################################################
<!--第四:JavaScript改变HTML图像-->
<script>
function changeImage(){
element=document.getElementById('myp_w_picpath')
if (element.src.match("bulbon"))
{element.src="/i/eg_bulboff.gif";}
else
{element.src="/i/eg_bulbon.gif";}
}
</script>
<img id="myp_w_picpath" οnclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
###########################################################
<!--第五:JavaScript能改变 HTML 元素的样式-->
<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
<script>
function myFunction(){
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
###########################################################
<!--第六:JavaScript验证输入是不是数字,不是数字会提醒-->
<script>
function myFunction(){
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
###########################################################
</body>
</html>
转载于:https://blog.51cto.com/xiaodongge/1885803