xml地图|网站地图|网站标签 [设为首页] [加入收藏]

js获取单选框或复选框值及操作,用js写倒计时

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:64 发布时间:2019-05-02
摘要:H5 Crash 研究 2016/05/31 · HTML5 ·Crash 原来的作品出处:小胡子哥(@Barret李靖)    咱俩掌握,支撑页面在 webview 上精美运转的前提是具备一个神速并且牢固的webview容器,而容器的迅猛牢

H5 Crash 研究

2016/05/31 · HTML5 · Crash

原来的作品出处: 小胡子哥(@Barret李靖)   

咱俩掌握,支撑页面在 webview 上精美运转的前提是具备一个神速并且牢固的 webview 容器,而容器的迅猛牢固不仅由容器提供方来保证,也急需容器使用者服从一些基本准则,不然就有一点都不小希望出现页面 Crash 的处境,那个轨道是怎么?什么样的上层代码会唤起容器卓殊退出?那是本文供给演讲的内容。

1、单选开关分明提交是不是可用

复制代码 代码如下:

H5 Crash 难点大致

下图是 H五 Crash 的大约流程图:

图片 1

鉴于前端不能够捕捉到页面 Crash 的事态和储藏室,不过 H五页面上发生的荒谬会传送到 Java 和更底层的 Native 直到容器至极退出,在脱离的那一刻,容器会将仓库写入到日志中,当下次开垦容器时(也可能是定期报告)就能够申报那个旅馆消息。

<input id="a" type="radio" name="a"  onclick="check()"/>

<script>
function checkbox()
{
var str=document.getElementsByName("box");
var objarray=str.length;
var chestr="";
for (i=0;i<objarray;i )
{//应接来到脚本之家,我们的网站是www.jb5一.net,很好记,脚本之家,js正是js特效,本站搜罗多量高素质js代码,还有大多广告代码下载。
if(str[i].checked == true)
{
chestr =str[i].value ",";
}
}//招待来到脚本之家,大家的网站是www.jb5一.net,很好记,脚本之家,js就是js特效,本站搜聚大量高水平js代码,还有大多广告代码下载。
if(chestr == "")
{
alert("请先选用一个欣赏~!");
}
else
{
alert("您先择的是:" chestr);
}
}
</script>
<a href="<#ZC_BLOG_HOST#>">脚本之家</a>,站长必备的高水平网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--迎接来到脚本之家,我们网址采访多量高水平js特效,提供数不完广告代码下载,网站:www.jb51.net,,用.net营造靓站-->
选拔你的喜爱:
<input type="checkbox" name="box" id="box1" value="跳水" />跳水
<input type="checkbox" name="box" id="box2" value="跑步" />跑步
<input type="checkbox" name="box" id="box3" value="听音乐" />听音乐
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" />

H五 Crash 原因初探

测试代码 库房地址:

git clone ; cd demo;

1
2
git clone https://github.com/barretlee/h5crash.git;
cd demo;

注意: 代码要求在 Webview 容器中测试,PC 浏览器下不会出现分外。

H伍 Crash 的由来不太强烈,不过从经验上判断和搜索,大约归类为以下两种:

1. 内部存储器难点

  • 测试方法:使用闭包,不断充实内部存款和储蓄器量,看看扩大到哪个区间大小, webview 容器会出现格外
  • 测试地方:(微信、和讯恐怕其他客户端展开该页面包车型客车用户,能够点进去测试下,选用100M 内部存款和储蓄器,不出意外,你的客户端会闪退。)

XHTML

<script> var Closure = function() { var _cache = []; var cache = 0; var add = function(size) { cache = size; size = size * 1024 * 1024; _cache.push(new Array(size).join('x')); refresh(); }; var refresh = function() { r.innerHTML = '内部存款和储蓄器消耗: ' cache 'M'; }; return { cache: cache 'M', add: add, refresh: refresh } }; var closure = Closure(); </script> <button onclick="closure.add(一)">增添1M 内部存款和储蓄器消耗</button> <button onclick="closure.add(10)">扩张十M 内部存款和储蓄器消耗</button> <button onclick="closure.add(20)">扩充20M 内部存款和储蓄器消耗</button> <button onclick="closure.add(50)">扩大50M 内部存款和储蓄器消耗</button> <button onclick="closure.add(十0)">扩展 100M 内部存款和储蓄器消耗</button> <div id="r">内部存款和储蓄器消耗:0 M</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
var Closure = function() {
  var _cache = [];
  var cache = 0;
  var add = function(size) {
    cache = size;
    size = size * 1024 * 1024;
    _cache.push(new Array(size).join('x'));
    refresh();
  };
  var refresh = function() {
    r.innerHTML = '内存消耗: ' cache 'M';
  };
  return {
    cache: cache 'M',
    add: add,
    refresh: refresh
  }
};
var closure = Closure();
</script>
 
<button onclick="closure.add(1)">增加 1M 内存消耗</button>
<button onclick="closure.add(10)">增加 10M 内存消耗</button>
<button onclick="closure.add(20)">增加 20M 内存消耗</button>
<button onclick="closure.add(50)">增加 50M 内存消耗</button>
<button onclick="closure.add(100)">增加 100M 内存消耗</button>
 
<div id="r">内存消耗:0 M</div>

留存的干扰:那种测试存在比较多的搅扰,比如设备档案的次序、系统项目(iOS/Android)、和装置内部存款和储蓄器运维处境等。

2. Layers 数问题

Layers 数的得到相比较费心,Chrome Driver 未有提供该多少的接口,近日也未曾比较好的艺术得到那个数量。

  • 测试方法:通过分歧的法子创立层,观看页面包车型客车 Crash 景况
  • 测试地方:

XHTML

<style>.transform { transform: translateZ(0); } .animation { width:100px; height:100px; background:red; position:relative; animation:move 5s infinite; } @keyframes move { from {left:0px;} to {left:200px;} } </style> <script> var Layer = function() { function getType() { return document.querySelector('input:checked').value; }; return { createOne: function(index) { var div = document.createElement('div'); div.appendChild(document.createTextNode(index)); switch(getType()) { case 'opacity': div.style.cssText = "opacity:" (index / 1000); break; case 'transform': div.className = 'transform'; break; case 'animation': div.className = 'animation'; break; case 'zindex': div.style.cssText = "position:relative; z-index:" index; break; } document.body.appendChild(div); }, create: function(num) { [].slice.call(document.querySelectorAll('div')).forEach(function(item) { item.parentNode && item.parentNode.removeChild(item); }); while(num--) { this.createOne(num); } } } }; var layer = Layer(); </script> <strong>层类型: </strong> <ul> <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创立层</span></label></li> <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创立层</span></label></li> <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创建层</span></label></li> <li><label><input type="radio" name="type" value="zindex"> <span>通过相对定位分层</span></label></li> </ul> <button onclick="layer.create(壹)">创制 一个层</button> <button onclick="layer.create(十)">创造 10个层</button> <button onclick="layer.create(20)">创造 十八个层</button> <button onclick="layer.create(50)">成立 四十两个层</button> <button onclick="layer.create(十0)">创设 100 个层</button> <button onclick="layer.create(200)">创立 200 个层</button> <button onclick="layer.create(500)">创建 500 个层</button> <button onclick="layer.create(一千)">创造 一千个层</button> <button onclick="layer.create(2000)">成立 贰仟个层</button> <button onclick="layer.create(4000)">成立 四千个层</button> <button onclick="layer.create(10000)">创制一千0 个层</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<style>.transform {
  transform: translateZ(0);
}
.animation {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:move 5s infinite;
}
 
@keyframes move {
  from {left:0px;}
  to {left:200px;}
}
</style>
<script>
var Layer = function() {
  function getType() {
    return document.querySelector('input:checked').value;
  };
  return {
    createOne: function(index) {
      var div = document.createElement('div');
      div.appendChild(document.createTextNode(index));
      switch(getType()) {
        case 'opacity':
          div.style.cssText = "opacity:" (index / 1000);
          break;
        case  'transform':
          div.className = 'transform';
          break;
        case  'animation':
          div.className = 'animation';
          break;
        case  'zindex':
          div.style.cssText = "position:relative; z-index:" index;
          break;
      }
      document.body.appendChild(div);
    },
    create: function(num) {
      [].slice.call(document.querySelectorAll('div')).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num--) {
        this.createOne(num);
      }
    }
  }
};
var layer = Layer();
</script>
 
<strong>层类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="zindex"> <span>通过绝对定位分层</span></label></li>
</ul>
 
<button onclick="layer.create(1)">创建 1 个层</button>
<button onclick="layer.create(10)">创建 10 个层</button>
<button onclick="layer.create(20)">创建 20 个层</button>
<button onclick="layer.create(50)">创建 50 个层</button>
<button onclick="layer.create(100)">创建 100 个层</button>
<button onclick="layer.create(200)">创建 200 个层</button>
<button onclick="layer.create(500)">创建 500 个层</button>
<button onclick="layer.create(1000)">创建 1000 个层</button>
<button onclick="layer.create(2000)">创建 2000 个层</button>
<button onclick="layer.create(5000)">创建 5000 个层</button>
<button onclick="layer.create(10000)">创建 10000 个层</button>
  • 实际上,创建多少个层,也是对内部存款和储蓄器的品格高尚的人消耗,页面 Crash 也许照旧因为内部存款和储蓄器消耗过大

三. 并发过多难题

  • 测试方法:尝试并发发出八种差别的乞求(Fetch请求、XH悍马H贰请求、Script/CSS 财富请求),观看页面 Crash 情状
  • 测试地方:

XHTML

<script> var Request = function() { function getType() { return document.querySelector('input:checked').value; }; function getResource() { var type = getType(); var resource = { fetch: '/', xhr: '/', script: '//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js', css: '//g.alicdn.com/kg/global-util/1.0.3/index-min.css' }; return resource[type]; }; return { emitOne: function() { var url = getResource() "?_t=" (new Date * 1 Math.random()); switch(getType()) { case 'fetch': return fetch('/'); case 'xhr': with(new XMLHttpRequest) { open('GET', url); send(); } return; case 'script': var s = document.createElement('script'); s.src = url; document.body.appendChild(s); return; case 'css': var s = document.createElement('link'); s.href = url; document.body.appendChild(s); } }, emit: function(num) { [].slice.call(document.querySelectorAll('script,link')).forEach(function(item) { item.parentNode && item.parentNode.removeChild(item); }); while(num--) { this.emitOne(); } } } }; var request = Request(); </script> <strong>请求类型: </strong> <ul> <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送请求</span></label></li> <li><label><input type="radio" name="type" value="xhr"> <span>使用 XHKuga发送请求</span></label></li> <li><label><input type="radio" name="type" value="script"> <span>并发请求脚本能源</span></label></li> <li><label><input type="radio" name="type" value="css"> <span>并发请求样式财富</span></label></li> </ul> <button onclick="request.emit(1)">并发 二个请求</button> <button onclick="request.emit(十)">并发 十二个请求</button> <button onclick="request.emit(20)">并发 二十一个请求</button> <button onclick="request.emit(50)">并发 四二十一个请求</button> <button onclick="request.emit(十0)">并发 拾0 个请求</button> <button onclick="request.emit(500)">并发 500 个请求</button> <button onclick="request.emit(一千)">并发 一千 个请求</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
var Request = function() {
  function getType() {
    return document.querySelector('input:checked').value;
  };
  function getResource() {
    var type = getType();
    var resource = {
      fetch: '/',
      xhr: '/',
      script: '//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js',
      css: '//g.alicdn.com/kg/global-util/1.0.3/index-min.css'
    };
    return resource[type];
  };
  return {
    emitOne: function() {
      var url = getResource() "?_t=" (new Date * 1 Math.random());
      switch(getType()) {
        case 'fetch':
          return fetch('/');
        case 'xhr':
          with(new XMLHttpRequest) {
            open('GET', url);
            send();
          }
          return;
        case 'script':
          var s = document.createElement('script');
          s.src = url;
          document.body.appendChild(s);
          return;
        case 'css':
          var s = document.createElement('link');
          s.href = url;
          document.body.appendChild(s);
      }
    },
    emit: function(num) {
      [].slice.call(document.querySelectorAll('script,link')).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num--) {
        this.emitOne();
      }
    }
  }
};
var request = Request();
</script>
 
<strong>请求类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="xhr"> <span>使用 XHR 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="script"> <span>并发请求脚本资源</span></label></li>
  <li><label><input type="radio" name="type" value="css"> <span>并发请求样式资源</span></label></li>
</ul>
 
<button onclick="request.emit(1)">并发 1 个请求</button>
<button onclick="request.emit(10)">并发 10 个请求</button>
<button onclick="request.emit(20)">并发 20 个请求</button>
<button onclick="request.emit(50)">并发 50 个请求</button>
<button onclick="request.emit(100)">并发 100 个请求</button>
<button onclick="request.emit(500)">并发 500 个请求</button>
<button onclick="request.emit(1000)">并发 1000 个请求</button>
  • 存在的干扰:设备的门类、设备的 CPU 使用景况和网络景况等。

<label for="a">同意</label>

复制代码 代码如下:

H伍 Crash 测试结果

测试结果:

  • 通过 opacity、animation、positon 等办法创立层,即就是 一w 个,页面也尚未分明性浮动;可是使用 transform 制造 二k~伍k 个层,页面会卡顿几秒后旋即闪退;
  • 内部存款和储蓄器是条红线,测试发掘,三回性消耗 20M 的内部存款和储蓄器,会促成客户端即时闪退;
  • 现身请求也是存在响应难点的,Fetch API 和 CSS Resource 并发 1k 请求未有出现难点,不过 XH汉兰达 和 Script Resource 请求,难题专门明确,纵然尚未造成页面闪退,但是页面已经进去了假死状态。

如上临界值还足以延续标准。

<input id="b" type="radio" name="a"  onclick="check()" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
label{
cursor:pointer;
font-size:12px;
margin:0px 2px 0px 0px;
color:#2B86BD;
}
.d0{
margin-bottom:30px;
}
.d0 input{
cursor:pointer;
margin:0px;
padding:0px 2px;
}
</style>
<script language="javascript" type="text/javascript">
var dr=document.getElementsByTagName("div"),i,t="";
function submit1(num,type){
t="";
var dri=dr[num].getElementsByTagName("input");
for(i=0;i<dri.length;i ){
if(dri[i].checked){
if(type==0){
alert(dri[i].value);
break;
}else{
t=t dri[i].value ";";
}
}
}
if(type==1) alert(t);
}
//ChangeSelect
submit1.allselect=function(){
var drc=dr[1].getElementsByTagName("input");
for(i=0;i<drc.length;i ){
drc[i].checked=true;
}
}
//allNot
submit1.allNot=function(){
var drc=dr[1].getElementsByTagName("input");
for(i=0;i<drc.length;i ){
drc[i].checked=false;
}
}
//reverse
submit1.reverseSelect=function(){
var drc=dr[1].getElementsByTagName("input");
for(i=0;i<drc.length;i ){
if(drc[i].checked){
drc[i].checked=false;
}else{
drc[i].checked=true;
}
}
}
</script>
<title>js获取单选框、复选框的值及操作</title>
</head>
<body>
<div class="d0">
<input type="radio" name="day" id="r0" value="前天"/><label for="r0">前天</label>
<input type="radio" name="day" id="r1" value="昨天"/><label for="r1">昨天</label>
<input type="radio" name="day" id="r2" checked="checked" value="今天"/><label for="r2">今天</label>
<input type="radio" name="day" id="r3" value="明天"/><label for="r3">明天</label>
<input type="radio" name="day" id="r4" value="后天"/><label for="r4">后天</label>
<button type="button" onclick="submit1(0,0)" >提交</button>
</div>
<div>
<input type="checkbox" value="前年" onclick="alert(this.value);"/><label>前年</label>
<input type="checkbox" value="去年" onclick="submit1(1,1);"/><label>去年</label>
<input type="checkbox" value="今年" /><label>今年</label>
<input type="checkbox" value="明年"/><label>明年</label>
<input type="checkbox" value="后年"/><label>后年</label>
<button type="button" onclick="submit1(1,1)" >提交</button>
<button type="button" onclick="submit1.allselect()" >全选</button>
<button type="button" onclick="submit1.reverseSelect()" >反选</button>
<button type="button" onclick="submit1.allNot()" >全不选</button>
</div>
</body>
</html>

小结

本文主借使对 H五 Crash 做了1个预备性商讨,测试大概存在不少误差,测试方法也亟需改进,不过沿着那一个的笔触考究会比较便于找到结论。

后续会交到比较有含义的境界数据以及探测工具。

 

1 赞 3 收藏 评论

图片 2

<label for="b">不同意</label><br />

代码如下: script function checkbox() { var str=document.getElementsByName("box"); var objarray=str.length; var chestr=""; for (i=0;iobjarray;i ) {//应接来到脚本...

<input type="button" name="d" id="c" value="提交" disabled="disabled"/>

<script>

function check(){

var yes=document.getElementById("a");

var no=document.getElementById("b");

var btn=document.getElementById("c");

//  if(yes.getAttribute("checked")) 这一个行不通,记住上面这几个yes.check

if(yes.checked)

{

btn.removeAttribute("disabled");

}

if(no.checked){

btn.setAttribute("disabled","disabled");

}

}

</script>

来得效果如下:

未点击前,提交按键不可用;在点击同意之后后交付开关可用。

 图片 3

                       

二、倒计时:

Eg1:

<script>

function shijian(){

alert("哈哈");

}

window.setTimeout("shijian()",2000);

</script>

注:setTimeoout属性是指延长多少时间爆发的事,以飞秒计数。

这里彰显效果: 哈哈分界面就能够在刷新页面三千飞秒后弹出。

Eg2:

<script>

function shijian(){

alert("哈哈");

}

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:js获取单选框或复选框值及操作,用js写倒计时

关键词: 68399皇家赌场 HTML5 JavaScript

最火资讯