JS实现——用3L和5L量出4L的水

把以下代码保存成donglanguage.html文件，使用Google或360浏览器打开

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>donglanguage</title>

<style>

</style>

</head>

<body>

<div style="position:absolute;top:20px;left:10px;width:200px;height:550px;">

  <div style="position:relative;top:200px;z-index:999">a 3L</div>

  <div id="a" style="position:absolute;top:200px;width:100px;height:300px;background-color:white;border:1px solid blue">

    <div id="water" style="position:relative;top:300px;height:0%;background-color:blue"></div>

  </div>

  <button name="fill" style="position:relative;top:520px">装满水</button>

  <button name="empty"  style="position:relative;top:520px">倒空水</button>

  <button name="toFill"  style="position:relative;top:520px">倒满水到另一个桶</button>

</div>

<div style="position:absolute;top:20px;left:220px;width:200px;height:550px;">

  <div style="position:relative;top:0px;z-index:999">b 5L</div>

  <div id="b" style="position:absolute;top:0px;width:100px;height:500px;background-color:white;border:1px solid blue">

    <div style="position:relative;top:500px;height:0%;background-color:blue"></div>

  </div>

  <button name="fill" style="position:relative;top:520px">装满水</button>

  <button name="empty" style="position:relative;top:520px">倒空水</button>

  <button name="toFill" style="position:relative;top:520px">倒满水到另一个桶</button>

</div>

<div style="position:relative;top:10px;left:500px;">

  问题：一个3L的捅，还有一个5L的桶，水无限。怎么操作才能准确地弄出4L的水？

  <button id="a_solution">我不会，看看解法</button>

</div>

<div style="position:relative;left:500px;top:40px;">

  <textarea id="program" style="font-size:20px;" rows="20" cols="40"></textarea>

  <button id="run">运行</button>

</div>

</body>

<script>

function $(selector) {

  var c = selector[0];

  if(c == '#') {

    var id = selector.substring(1);

    return document.getElementById(id);

  } else if(c == '@') {

    var name = selector.substring(1);

    return document.getElementsByName(name);

  } else {

    return document.getElementsByTagName(selector);

  }

};

//onload start

onload = function() {

$('#run').onclick = function() {

  var code = $('#program').value;

  run(code);

}

$('#a_solution').onclick = function() {

  var program = 'a.empty()\nb.empty()\n\n' +

  'b.fill()\nb.toFill(a)\na.empty()\nb.toFill(a)\nb.fill()\nb.toFill(a)';

  $('#program').value = program;

  run(program);

}

function fillClick() {

  run(this.parentNode.children[1].id + '.fill()');

}

function emptyClick() {

  run(this.parentNode.children[1].id + '.empty()');

}

function toFillClick() {

  var thisId = this.parentNode.children[1].id;

  var from, to;

  if(thisId == 'a') {

    from = 'a';

    to = 'b';

  } else if(thisId == 'b') {

    from = 'b';

    to = 'a';

  }

  run(from + '.toFill(' + to + ')');

}

window.opBtns = $('button');

window.disableAllOpBtns = function(b) {

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

    opBtns[i].disabled = b ? 'disabled' : '';

}

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

  var btn = opBtns[i];

  switch(btn.name) {

  case 'fill':

    btn.onclick = fillClick;

    break;

  case 'empty':

    btn.onclick = emptyClick;

    break;

  case 'toFill':

    btn.onclick = toFillClick;

    break;

  }

}

window.queue = false;

window.buckets = [$('#a'), $('#b')];

};//onload end

function isEmpty(bucket) {

  return parseInt(bucket.children[0].style.top) == parseInt(bucket.style.height);

}

function isFull(bucket) {

  return parseInt(bucket.children[0].style.top) == 0;

}

function addWater(bucket, litre, zeroH, fullH) {

  queue = false;

  disableAllOpBtns(true);

  var water = bucket.children[0];

  var timer = setInterval(function() {

    if(litre == 0) {

      clearInterval(timer);

      disableAllOpBtns(false);

      if(zeroH)

        zeroH();

      queue = true;

      return;

    }

    if(isFull(bucket)) {

      clearInterval(timer);

      disableAllOpBtns(false);

      if(fullH)

        fullH();

      queue = true;

    }

    var top = parseInt(water.style.top);

    water.style.top = (top - 100) + 'px';

    water.style.height = (parseInt(bucket.style.height) - (top - 100)) + 'px';

    --litre;

  }, 100);

}

function subWater(bucket, litre, zeroH, emptyH) {

  queue = false;

  disableAllOpBtns(true);

  var water = bucket.children[0];

  var timer = setInterval(function() {

    if(isEmpty(bucket)) {

      clearInterval(timer);

      disableAllOpBtns(false);

      if(emptyH)

        emptyH();

      queue = true;

      return;

    }

    if(litre == 0) {

      clearInterval(timer);

      disableAllOpBtns(false);

      if(zeroH)

        zeroH();

      queue = true;

      return;

    }

    var top = parseInt(water.style.top);

    water.style.top = (top + 100) + 'px';

    water.style.height = (parseInt(bucket.style.height) - (top + 100)) + 'px';

    --litre;

  }, 100);

}

function fill(bucket) {

  addWater(bucket, parseInt(bucket.children[0].style.top) / 100);

}

function empty(bucket) {

  subWater(bucket, parseInt(bucket.children[0].style.height) / 100);

}

function toFill(bucketFrom, bucketTo) {

  queue = false;

  disableAllOpBtns(true);

  var waterFrom = bucketFrom.children[0];

  var waterTo = bucketTo.children[0];

  var timer = setInterval(function() {

    var waterFromTop = parseInt(waterFrom.style.top);

    var waterFromHeight = parseInt(waterFrom.style.height);

    var waterToTop = parseInt(waterTo.style.top);

    var waterToHeight = parseInt(waterTo.style.height);

    if(isFull(bucketTo) || isEmpty(bucketFrom)) {

      clearInterval(timer);

      disableAllOpBtns(false);

      queue = true;

      return;

    }

    waterFrom.style.top = (waterFromTop + 100) + 'px';

    waterFrom.style.height = (parseInt(bucketFrom.style.height) - (waterFromTop + 100)) + 'px';

    waterTo.style.top = (waterToTop - 100) + 'px';

    waterTo.style.height = (parseInt(bucketTo.style.height) - (waterToTop - 100)) + 'px';

  }, 100);

}

var isOperator = function (c) { return /[+\-*\/\^%=(),.]/.test(c); },

    isDigit = function (c) { return /[0-9]/.test(c); },

    isWhiteSpace = function (c) { return /\s/.test(c); },

    isIdentifier = function (c) { return typeof c === "string" && !isOperator(c) && !isDigit(c) && !isWhiteSpace(c); };

function lex(input) {

  var tokens = [];

  var c, i = 0;

  var advance = function () { return c = input[++i]; };

  var addToken = function (type, value) {

    tokens.push({

      type: type,

      value: value

    });

  };

  while(i < input.length) {

    c = input[i];

    if(isWhiteSpace(c))

      advance();

    if(isIdentifier(c)) {

      var id = c;

      while(isIdentifier(advance())) id += c;

      addToken("identifier", id);

    } else if(isOperator(c)) {

      addToken(c);

      advance();

    }

  }

  addToken('(end)');

  return tokens;

}

function parse(tokens) {

  var expression = function() {

    var expression = {};

    expression.type = 'call';

    expression.args = [];

    var argExpression = {};

    expression.args.push(tokens[i]);

    advance();

    advance();

    expression.name = tokens[i].value;

    advance();

    advance();

    if(tokens[i].type == 'identifier') {

      expression.args.push(tokens[i]);

      advance();

    }

    advance();

    return expression;

  }

  var parseTree = [];

  var i = 0;

  var advance = function () { return tokens[++i]; };

  while(tokens[i].type != '(end)') {

    parseTree.push(expression());

  }

  return parseTree;

}

function evaluate(parseTree) {

  var functions = {

    'fill': fill,

    'empty': empty,

    'toFill': toFill

  };

  var variables = {

    'a': buckets[0],

    'b': buckets[1]

  };

  var parseNode = function(node) {

    if(node.type == 'identifier') {

      var value = variables[node.value];

      return value;

    }else if(node.type == 'call') {

      var args = node.args;

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

        args[i] = parseNode(args[i]);

      return functions[node.name].apply(null, args);

    }

  }

  var i = 0;

  queue = true;

  var timer = setInterval(function() {

    if(queue) {

      parseNode(parseTree[i]);

      i++;

      if(i >= parseTree.length) {

        clearInterval(timer);

      }

    }

  }, 0);

}

function run(code) {

  try {

    var tokens = lex(code);

    var parseTree = parse(tokens);

    return evaluate(parseTree);

  } catch (e) {

    return e;

  }

}

</script>

</html>

出处：qq群--编程算法&思想 459909287

JS实现——用3L和5L量出4L的水的更多相关文章

给你一个 5L 和 3L 桶，水无限多，怎么到出 4L。
智力题给你一个 5L 和 3L 桶,水无限多,怎么到出 4L. 思考过程先将 3L 的桶装满水,倒入 5L 的桶里. 再重新将 3L 的桶装满水,倒入 5L 的桶里,把 5 L 的桶装满后,这样 ...
JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
《JS高程》-教你如何写出可维护的代码
1.前言在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码.很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以 ...
工作当中实际运用（3）——js原生实现鼠标点击弹出div层在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
原生js添加博客点击鼠标出小心心效果~~
昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...
js原生实现div渐入渐出
jq对渐入渐出进行封装,简单的使用连个方法就可以实现.fadeIn(),fadeOut();如果我们界面没有使用jq那么原生怎么实现呢? 我们讲解一下,这个原理.当我们要实现渐入的时候,首先是让隐藏的 ...
js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
JS应用实例3：定时弹出广告
在观看视频时候总会发现有广告弹出这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写用的时候引入即可 HTML代码: <!DOCTYPE ...

随机推荐

基于名称的虚拟主机-Apache
基于名称的虚拟主机和基于IP的虚拟主机的对比基于IP的虚拟主机使用连接的IP地址来识别(区分)正确的虚拟主机,所以对于每一个虚拟主机,你都需要有独立的IP地址. 基于名称的虚拟主机,服务器依赖于客户 ...
公司项目git开发流程规范
手动修改冲突之后,git add . git commit ,git push
Mind must be master of the body, strong mind can separate the body from its suffering.
Mind must be master of the body, strong mind can separate the body from its suffering.意志是身体的主人,有顽强的意 ...
iOS 应用架构 (二)
iOS 客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来回答 iOS 应用架构中的种种问题,本文是其中的第二篇,主要讲 View 层的组织和调用方案.上篇主要讲 View ...
深入理解Java流机制（一）
一.前言 C语言本身没有输入输出语句,而是调用"stdio.h"库中的输入输出函数来实现.同样,C++语言本身也没有输入输出,不过有别于C语言,C++有一个面向对象的I/O流类库& ...
排序算法C语言实现
大学有一门课程叫做数据结构,严蔚敏的课本,其中详细介绍了集中经典的排序算法,学习复习反复几次,但是直到现在仍然只记得名字了,所以想记录下来,随时复习直至牢记于心.经常面试的朋友知道,排序算法在面试中出 ...
jsp另外五大内置对象之-out获取缓冲区大小
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
SPOJ BALNUM Balanced Numbers 平衡数（数位DP，状压）
题意: 平衡树定义为“一个整数的某个数位若是奇数,则该奇数必定出现偶数次:偶数位则必须出现奇数次”,比如 222,数位为偶数2,共出现3次,是奇数次,所以合法.给一个区间[L,R],问有多少个平衡数? ...
iOS动画——Layer Animations
我们先来看一下今天我们要实现的效果,今天实现的效果用第一篇View Animations能实现相同效果. 动画由书籍<iOS Animations by tutorials>提供,我只是一 ...
self & this 上下文
对象:指向对象的首地址: 函数:代表了函数运行的主要上下文: 内部:在类的内部使用. self Within the body of a class method, self refers to th ...

JS实现——用3L和5L量出4L的水

JS实现——用3L和5L量出4L的水的更多相关文章

随机推荐

热门专题