zoukankan      html  css  js  c++  java
  • 5.15js的初步接触

    1.淘宝 购物车的 页面上会有 改变数量 就会产生 对应的价格,

        <td><input type="button" id="jian" value="-" onclick="showsum('-')"/>
        
        <input type="text" id="number" size="3" value="1"/>
        
        <input type="button" id="add" value="+" onclick="showsum('+')"/></td>
        <td>
         <input type="text"  id="sum" />
        </td>
    

      以上 是html 代码,

      js就是 先把 number的值 取出来

    function showsum(v){
    先把 客户的 原始number 取出来 var number=parseFloat(document.getElementById("number").value); switch(v){ case '-':number-=1; break; case '+':number+=1; break; }
    把 计算的值 再显示 出来
    document.getElementById("number").value=number;

    调用 一个 函数 计算 sum calprice(); } function calprice(){ var price=parseFloat(document.getElementById("price").innerHTML);/*常量 是单价*/ 这里 取出来的 是 计算过后的 value var number=parseFloat(document.getElementById("number").value); var total=number*price; document.getElementById("sum").value=total; }

      

    2.提交 一个 表单之后 会实现 跳转,

    function check(){
        var yan=document.all.yan.value;// 一样的 效果
    	  var yan2=document.getElementById("yan2").value;	
    	
    	if(yan=='1234'&&yan2=='4567')
    	{
    		return true;
    		}
    		alert("错误");
    	return false;
    	
    	}
    
    
    </script>
    <body>          如果 返回的值 是true 那么 就会实现跳转
    <form onsubmit="return check();" action="打印三角形1.html">
     <div id="alipay">
         <font>请输入一下的验证码:1234</font>
        <input type="text" id="yan"/>
     <br/>
     <font>请输入一下的验证码:4567</font>
        <input type="text" id="yan2" />
         <br/>
         
         <input type="submit"  /> <input type="reset"  />
        
     </div>
    

      》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

    3.需要 注意的 是 input 的类型的 value 值 ,你输入的 是 属于 String 类型,需要 进行转化

    	var sum2=parseFloat(document.getElementById("num2").value);	
    

     4.使用 js 来 改变 div 元素的 style

      <input type="button" value="黑色" id="blackid" onclick="showcolor('b')" />
          <input type="button" value="蓝色" id="redid" onclick="showcolor(this)" />
      》》》》》》》》》》》》》》》》》》》》》》》》
    function showcolor(se){
    	             一个是 普通的 ,一个是 传入 元素 this值
    	switch(se){
    		case 'b':document.getElementById("xiao").style.background='black';break;
    	switch(se.id){
    		case 'redid':document.getElementById("xiao").style.background='blue';break;
    		}
    	}
    

    》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》  

    5.根据 时间的不同 来 改变 css背景,就是 new Date()而已

             var now=new Date();
    	var hour=now.getHours();
    	
    	switch(hour){
    		              这里就是 整个文档
    		case '10':document.bgColor='red';break;
    		}
    

     6. 通过 改变 标签元素的类名,来实现对 css 改变


    <div onmousemove="this.className='over'" onmouseout="nn" class="nn1"></div>

    》》》》》》》》》》》》》》》》》》》》》》》》

     7.对于 广告的 弹窗 使用的 showModal

    <input type="button" onclick="showw()" />
    function showw(){   
       window.showModalDialog("showmodal2.html","","dialogWidth:400px;dialogHeiht:150px;");	  使用的 window事件
    	
    	}

      

    8.window 下面 有  document(整个 html 文档)

      location(也就 url 有用) history 

    event ( 事件的 状态,比如 鼠标和键盘) 》》
    ————————————————————————————————————
    还有 给开发人员用的 窗口对象,计时器
    setTiemout(函数,时间) alert() confirm();

    showModalDialog(其中 一个模型) open() 和close()
    __________________________________________________________
    9.document 对象 就会有很多的属性可以操作
    主要是 getElById(“”)
    至于 ByName()主要 就是用在 checkbox()中的 全选
    <a href="#" onclick="mychange(true)">全选</a>
    <a href="#" onclick="mychange(false)">不选</a>
    
    <input type="checkbox" name="love" >2 <br/>
    <input type="checkbox" name="love" >23 <br/>
    <input type="checkbox" name="love" >23 <br/>
    <input type="checkbox" name="love" >24<br/>
    
    function mychange(v){
    	
    	var arys=document.getElementsByName("love");
    	for(var i in arys){ 也只有这个 地方会使用拉
    		
    		arys[i].checked=v; 就是一个 选中
    		}
    	
    	}
    

      10.操作 DOM 节点目前 还没有用到, 当有而来 jq 之后,应该 就很少使用

    》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

    11 。至于 操作 字符串和 字符数组 he  java 差不多

    var data="宝马,丰田,大众,奔驰";

    var array=data.split(",");  变成了 数组

    var shujua=do.g..Name(""); 取得 了一个  对象数组

           for(var i=0;i<array.length;i++){

                  for(var j=0;j<shujua.length;j++){

                      if(array[i]==shujua[j].value){

                                  shujua[j].checked=true;

                                      break;}

             }

    }

    ————————————————————————————————————————————————————

  • 相关阅读:
    开发落网电台windows phone 8应用的计划(3)
    开发落网电台windows phone 8应用的计划(2)
    开发落网电台windows phone 8应用的计划(1)
    codeforces 111B Petya and Divisors
    Mac远程连接windows报错“证书或相关链无效,是否仍要连接到此计算机”的处理办法。
    Navicat连接报错:cannot load OCI DLL,126
    navicat 连接oracle数据库报错:ORA-28547:connection to server failed,probable Oracle Net admin error
    无法启动此程序因为计算机中丢失msvcr71
    CSS实现矩形按钮右边缘的中间有个往里凹的小半圆
    如何运行jar文件
  • 原文地址:https://www.cnblogs.com/yyjxxd/p/5588792.html
Copyright © 2011-2022 走看看